@charset "utf-8";
/* =============================================================================
   Unique — Area riservata
   Foglio di stile del tema "Unique". Sostituisce integralmente Default.css:
   il vecchio tema non viene piu' caricato, quindi qui non si sovrascrive nulla,
   si costruisce da zero.

   Riprende i token di www.unique-center.it con uno sfondo leggermente piu'
   profondo, per far capire di essere in area riservata restando nella stessa
   famiglia visiva del sito.

   Priorita': telefono (90% degli accessi) e leggibilita' per un pubblico anche
   anziano. Corpo a 15px, bersagli di tocco da 44px (il minimo raccomandato),
   stato dei posti espresso a parole oltre che con il colore.
   I campi compilabili restano pero' a 16px: sotto quella soglia iPhone
   ingrandisce la pagina da solo appena si tocca una casella.
   ========================================================================== */

:root{
  --bg:#F1EBE4; --surface:#fff; --surface-2:#FAF8F5;
  --line:rgba(46,51,41,.12); --line-2:rgba(46,51,41,.22);
  --dark:#2E3329; --dark-2:#3A4034; --on-dark:#F5F2EE; --on-dark-2:#BDB9AF;
  --ink:#2E3329; --ink-2:#5C6154; --ink-3:#7C7D72;
  --taupe:#826B5C; --taupe-deep:#6B5749; --taupe-pale:#EDE3DA;
  --acqua:#4E8296; --acqua-pale:#DFEAEE;
  --verde:#4F6A3F; --verde-pale:#E6EDE1;
  --ambra:#8A6410; --ambra-pale:#F6EDD8;
  --rosso:#97402A; --rosso-pale:#F6E4DE;
  --maxw:1120px; --r:10px; --r-lg:16px; --tap:44px;
  --font:'Inter','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --sh:0 1px 2px rgba(46,51,41,.05),0 10px 30px -20px rgba(46,51,41,.45);
  --sh-lg:0 2px 8px rgba(46,51,41,.07),0 28px 60px -34px rgba(46,51,41,.55);
}

/* ---------- base ---------------------------------------------------------- */
html{box-sizing:border-box;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
/* Misurato: dentro l'area contenuti alcuni elementi restavano a content-box
   nonostante la riga qui sopra, e un pulsante largo 100% ci sommava sopra i
   propri margini interni sfondando il riquadro di una trentina di pixel.
   Qui il calcolo viene imposto invece che ereditato.                        */
#content,#content *{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
     font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;border:0}
h1,h2,h3,h4{margin:0 0 .6em;line-height:1.18;letter-spacing:-.015em;color:var(--ink)}
h1{font-size:clamp(1.25rem,4.2vw,1.6rem)}
h2{font-size:1.15rem}
h3{font-size:1.02rem}
p{margin:0 0 1rem}
a{color:var(--taupe-deep)}
a:hover{color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:1.75rem 0}
:focus-visible{outline:3px solid var(--taupe);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--dark);
      color:var(--on-dark);padding:.9rem 1.2rem;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ---------- barra superiore ---------------------------------------------- */
#header{background:var(--dark);color:var(--on-dark);position:sticky;top:0;z-index:40}
#headerimg{max-width:var(--maxw);margin:0 auto;padding:.85rem 1.25rem;
           display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:100%}
#headerimg{max-width:var(--maxw)}
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand img{display:block;height:23px;width:auto}

/* font-size:0 sul contenitore azzera i nodi di testo sciolti che il controllo
   utente mette fra gli elementi (il separatore "|"); i figli riprendono la
   dimensione normale.                                                        */
.utente{display:flex;align-items:center;justify-content:flex-end;gap:.6rem .85rem;
        flex-wrap:wrap;min-width:0;font-size:0;color:var(--on-dark-2)}
.utente>*{font-size:.9rem}
.utente span{min-width:0;overflow-wrap:anywhere}
@media(max-width:47.99rem){
  /* sul telefono il saluto ruba spazio: resta il solo pulsante di uscita */
  .utente [id*="lblMessage"]{display:none}
}
.utente a{color:#fff;font-weight:600;text-decoration:none;font-size:.85rem;
          border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.5rem .9rem;white-space:nowrap}
.utente a:hover{background:rgba(255,255,255,.12)}

/* ---------- schede di navigazione ----------------------------------------- */
/* asp:Menu genera tabelle annidate: qui diventano una barra di schede. */
#menu{background:var(--dark-2);border-top:1px solid rgba(255,255,255,.08)}
#menu>a{display:none}
#menu>table{width:100%;max-width:var(--maxw);margin:0 auto;table-layout:fixed;border-collapse:collapse}
#menu td{padding:0;border:0;background:none}
#menu td[style*="15px"]{display:none}
#menu td table{width:100%;border-collapse:collapse}
#menu td a{display:block;text-align:center;padding:.7rem .35rem;min-height:var(--tap);
           color:var(--on-dark-2);font-size:.85rem;font-weight:600;text-decoration:none;
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
           /* asp:Menu scrive border-style:none in linea sul tag: senza
              !important la riga sotto la scheda attiva non si vede. */
           border-bottom:3px solid transparent!important}
#menu td a:hover{color:#fff;background:rgba(255,255,255,.07)}
#menu td a.selected,#menu td a[href$="#"]{color:#fff;border-bottom-color:var(--taupe)!important}

/* Sul telefono le colonne di larghezza uguale non bastano piu'.
   `table-layout:fixed` dava a ogni voce lo stesso quarto di schermo, circa
   95px: "Le mie prenotazioni" non ci sta e sbordava sopra "Informazioni".
   Andare a capo non risolve in modo affidabile, perche' asp:Menu scrive
   white-space sulle proprie celle e ogni versione di .NET lo fa a modo suo.

   Qui si toglie la larghezza forzata: ogni scheda diventa larga quanto la sua
   scritta, che quindi non puo' piu' sbordare per costruzione. Con le quattro
   voci attive (Home, Prenota, Le mie prenotazioni, Informazioni) la barra sta
   dentro un telefono normale; sugli schermi piu' stretti si scorre con il
   dito, e le due ombre laterali compaiono solo quando c'e' davvero altro da
   vedere (background-attachment: local per il fondo, scroll per le ombre).
   Da tablet in su non cambia niente: le colonne uguali ci stanno comode.    */
@media(max-width:47.99rem){
  #menu{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
        background-image:
          linear-gradient(to right,var(--dark-2),var(--dark-2)),
          linear-gradient(to right,var(--dark-2),var(--dark-2)),
          linear-gradient(to right,rgba(0,0,0,.38),rgba(0,0,0,0)),
          linear-gradient(to left,rgba(0,0,0,.38),rgba(0,0,0,0));
        background-position:left center,right center,left center,right center;
        background-repeat:no-repeat;
        background-size:22px 100%,22px 100%,16px 100%,16px 100%;
        background-attachment:local,local,scroll,scroll}
  #menu::-webkit-scrollbar{display:none}
  #menu>table{width:auto;min-width:100%;max-width:none;table-layout:auto}
  #menu td table{width:auto}
  /* !important sulla misura: asp:Menu scrive font-size in linea sul tag
     (style="border-style:none;font-size:1em;") e senza questo la scritta
     resterebbe alla misura del corpo del testo, piu' larga del previsto. */
  #menu td a{font-size:.8rem!important;padding:.7rem .6rem;letter-spacing:-.01em;
             overflow:visible;text-overflow:clip}
}

/* ---------- corpo --------------------------------------------------------- */
#main{display:block}
#content{max-width:var(--maxw);margin:0 auto;padding:.85rem .85rem 2rem}
#separator{margin:0 0 .8rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
#separator:empty{display:none;margin:0}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
         color:var(--ink-3);font-weight:700;margin-bottom:.4rem;display:block}

/* ---------- scheda ------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
      box-shadow:var(--sh);padding:1rem .95rem;margin:0 0 .85rem;min-width:0}
.card--center{max-width:420px;margin-inline:auto;box-shadow:var(--sh-lg);padding:2rem 1.75rem}
.card__sub{color:var(--ink-2);margin-bottom:1.5rem}
.card__help{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);
            font-size:.95rem;color:var(--ink-2)}
.card__help a{font-weight:600}
/* Niente justify-items:center qui: farebbe dimensionare la scheda sul proprio
   contenuto (fino a max-width) invece che sul contenitore, sfondando lo schermo
   sui telefoni stretti. La scheda si centra da sola con margin-inline:auto. */
.access{padding:clamp(1.5rem,6vw,3.5rem) 0}

/* ---------- campi --------------------------------------------------------- */
.field{margin:0 0 .65rem}
.field>label,.field .lbl{display:block;font-weight:600;margin-bottom:.4rem;color:var(--ink)}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],
input[type=date],input[type=time],select,textarea,.normalTextBox{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;max-width:100%;min-height:var(--tap);
  padding:.6rem .8rem;font-family:var(--font);font-size:16px;color:var(--ink);
  background:var(--surface-2);border:1.5px solid var(--line-2);border-radius:var(--r);margin:0}
select{padding-right:2.8rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%235C6154' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--taupe);
  background:var(--surface);box-shadow:0 0 0 4px rgba(130,107,92,.18)}
input[type=checkbox],input[type=radio]{width:1.35rem;height:1.35rem;min-height:0;
  display:inline-block;margin:0 .55rem 0 0;accent-color:var(--taupe-deep)}

/* ---------- pulsanti ------------------------------------------------------ */
.button,input[type=submit],input[type=button],button{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:var(--tap);padding:.65rem 1.15rem;
  font-family:var(--font);font-size:15px;font-weight:650;line-height:1.2;
  color:#fff;background:var(--taupe-deep);border:0;border-radius:var(--r);
  cursor:pointer;text-decoration:none;transition:background .15s ease}
.button:hover,input[type=submit]:hover,button:hover{background:var(--taupe);color:#fff}
.button:active,input[type=submit]:active{transform:translateY(1px)}
.button[disabled],input[disabled]{opacity:.5;cursor:not-allowed}
.btn-ghost,.btn-ghost:hover{background:transparent;color:var(--taupe-deep);border:1.5px solid var(--line-2)}
.btn-ghost:hover{background:var(--taupe-pale)}
.helpHeaderButton{width:auto;min-height:0;padding:.3rem .55rem;background:none;color:var(--taupe-deep);box-shadow:none}

/* ---------- avvisi -------------------------------------------------------- */
.note{background:var(--acqua-pale);border:1px solid rgba(78,130,150,.28);
      border-radius:var(--r);padding:1rem 1.15rem;color:#26414c;margin:0 0 1.25rem;font-size:.97rem}
.alert{background:var(--rosso-pale);border:1px solid rgba(151,64,42,.3);
       border-radius:var(--r);padding:1rem 1.15rem;color:var(--rosso);font-weight:600;margin:0 0 1.25rem}
[id*="cv"],[id*="vl"],[id*="rfv"],[id*="cvE"],.validateTips{
  display:block;color:var(--rosso);background:var(--rosso-pale);
  border:1px solid rgba(151,64,42,.28);border-radius:var(--r);
  padding:.65rem .9rem;margin:.5rem 0 0;font-size:.95rem;font-weight:600}
[id*="cv"]:empty,[id*="vl"]:empty,[id*="rfv"]:empty,.validateTips:empty{display:none}

/* ---------- pannello di ricerca ------------------------------------------- */
.searchBody{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
            box-shadow:var(--sh);padding:.9rem .9rem;margin:0 0 .85rem;width:auto}
.searchHeading{display:block;font-size:1.02rem;font-weight:700;margin:0 0 1rem;color:var(--ink)}
.hintContainer{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
               padding:1rem 1.15rem;margin:0 0 1.25rem;font-size:.95rem;color:var(--ink-2)}
.blueInfo{background:var(--acqua-pale);border:1px solid rgba(78,130,150,.28);
          border-radius:var(--r);padding:1rem 1.15rem;margin:0 0 1.25rem;color:#26414c}

/* ---------- carosello della home ------------------------------------------ */
/* Era un plugin del 2009 che non carichiamo piu': la lista di immagini
   diventa una striscia che si scorre con il dito, senza JavaScript.         */
#slider ul{display:flex;gap:.75rem;list-style:none;margin:0;padding:0 0 .75rem;
           overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
           text-align:left!important}
#slider ul::-webkit-scrollbar{height:6px}
#slider ul::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
#slider li{flex:0 0 86%;scroll-snap-align:center;margin:0}
#slider img{display:block;width:100%;height:210px;object-fit:cover;border-radius:var(--r-lg)}
#slider{margin:0 0 1.5rem}
/* Sul telefono la scheda e' larga circa 335px e alta 210: quasi esattamente
   il formato delle foto, che quindi si vedono intere. Su schermo largo, con
   una foto sola a tutta pagina, la stessa altezza dava una striscia 5:1 che
   ne mostrava solo la fascia centrale: qui vanno tre per riga, cosi' si
   riconosce cosa c'e' dentro.                                              */
@media(min-width:48rem){
  #slider li{flex:0 0 calc((100% - 1.5rem) / 3)}
  #slider img{height:200px}
}

/* ---------- pagina di ingresso ------------------------------------------- */
/* Il riquadro con il pulsante "Accedi" che vede chi non e' ancora entrato.
   Usa la stessa scheda della pagina di accesso (.card--center), cosi' le due
   pagine che un socio vede una dietro l'altra si somigliano. Il testo e'
   centrato perche' qui dentro c'e' una frase sola e un pulsante: nella scheda
   dell'accesso, che ha etichette e campi, resta allineato a sinistra.
   Su schermo largo il pulsante torna della sua misura (min-width:12rem lo
   impone la regola generale) e si centra da solo, essendo inline-flex.     */
.homeDash{margin:.25rem 0 0}
.homeDash .card{text-align:center}
.homeDash .card__sub{margin-bottom:1.25rem}

/* ---------- elenchi ------------------------------------------------------- */
#content ul{margin:0 0 1rem;padding-left:1.3em}
#content ul li{margin:0 0 .35rem}
#content ul li::marker{color:var(--taupe)}
#content ul ul{margin:.35rem 0 .5rem;padding-left:1.2em}

/* ---------- striscia dei giorni -------------------------------------------- */
.daystrip{margin:0 0 .9rem}
.daystrip__t{font-size:1.02rem;font-weight:700;letter-spacing:-.015em;margin:0 0 .75rem;color:var(--ink)}
.days{display:flex;gap:.55rem;overflow-x:auto;padding:.25rem;margin:0 -.25rem;
      scrollbar-width:none;-webkit-overflow-scrolling:touch}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 auto;min-width:3.5rem;padding:.45rem .6rem;background:var(--surface);
     border:1.5px solid var(--line);border-radius:var(--r);text-align:center;
     text-decoration:none;color:var(--ink);scroll-snap-align:start}
.day b{display:block;font-size:.95rem;line-height:1.1;font-variant-numeric:tabular-nums}
.day span{font-size:.75rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.day:hover{border-color:var(--taupe);color:var(--ink)}
.day[aria-current]{background:var(--dark);border-color:var(--dark);color:#fff}
.day[aria-current] span{color:var(--on-dark-2)}

/* ---------- form di ricerca ----------------------------------------------- */
.form-grid{display:grid;gap:.25rem}
.field--action{margin-top:.5rem}

/* filtri secondari: la data la sceglie la striscia dei giorni, la fascia
   oraria serve di rado. Restano raggiungibili ma non ingombrano.           */
.filtri{grid-column:1/-1;margin:.25rem 0 1rem;border-top:1px solid var(--line);padding-top:.85rem}
.filtri>summary{cursor:pointer;font-weight:600;color:var(--taupe-deep);list-style:none;
                display:inline-flex;align-items:center;gap:.45rem;min-height:44px}
.filtri>summary::-webkit-details-marker{display:none}
.filtri>summary::before{content:"+";font-size:1.2rem;line-height:1;width:1.4rem;height:1.4rem;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--taupe-pale);color:var(--taupe-deep);font-weight:700}
.filtri[open]>summary::before{content:"\2212"}
.filtri__corpo{padding-top:.75rem}
.daterange{display:flex;align-items:center;gap:.6rem}
.daterange input{flex:1 1 0;min-width:0;text-align:center;width:auto!important}
.daterange__sep{color:var(--ink-3);font-size:1.2rem;flex:0 0 auto}
#slider-range{width:auto!important;margin:1.2rem .9rem 1.6rem}
#timeSpan{margin:.2rem 0 .4rem;font-size:1.15rem;font-weight:700;color:var(--ink)}

/* ---------- pastiglie di stato -------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.24rem .62rem;
      border-radius:999px;font-size:.75rem;font-weight:700;white-space:nowrap}
.pill .dot,.dot{width:.5rem;height:.5rem;border-radius:999px;background:currentColor;flex:0 0 auto;display:inline-block}
.pill--ok{background:var(--verde-pale);color:var(--verde)}
.pill--few{background:var(--ambra-pale);color:var(--ambra)}
.pill--full{background:var(--rosso-pale);color:var(--rosso)}
.pill--mine{background:var(--acqua-pale);color:var(--acqua)}
.pill--off{background:#EAE7E2;color:var(--ink-3)}

.legend{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;
        background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
        padding:.9rem 1rem;margin:0 0 1.25rem}
.legend__t{font-weight:700;color:var(--ink);margin-right:.25rem}

/* ---------- navigazione settimana ----------------------------------------- */
.weeknav{display:flex;gap:.65rem;margin:0 0 .85rem}
.weeknav>div{flex:1 1 0;min-width:0}
.weeknav .button{width:100%}

/* ---------- risultati come schede ------------------------------------------ */
/* Struttura reale prodotta dal gestionale, verificata sull'HTML servito:
     tr.GridHeader   intestazioni di colonna
     tr.GroupHeader  intestazione di giornata, gia' generata dal server
     tr.GridRow      la lezione, con 6 celle:
       1 nome del corso  2 dalle ore  3 alle ore
       4 quadratino colorato con lo stato  5 prenota/elimina  6 lista d'attesa
   Il colore dello stato sta sulla quarta cella, non sulla riga.            */
#content table[id*="GridView"]{border:0;display:block;width:100%}
#content table[id*="GridView"]>tbody{display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
#content table[id*="GridView"] tr.GridHeader{display:none}

/* intestazione di giornata */
#content table[id*="GridView"] tr.GroupHeader{
  grid-column:1/-1;display:block;background:none;border:0;box-shadow:none;
  padding:.7rem 0 0;margin:.3rem 0 0}
#content table[id*="GridView"] tr.GroupHeader>td{
  display:block;padding:0 0 .5rem;border:0;border-bottom:2px solid var(--line-2);
  font-size:.92rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  text-transform:capitalize}
#content table[id*="GridView"] tr.GroupHeader:first-child{margin-top:0;padding-top:0}

/* la lezione */
#content table[id*="GridView"] tr.GridRow{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"orai nome" "oraf stato" "azione azione" "attesa attesa";
  gap:.15rem .9rem;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:.65rem .8rem;margin:0}
#content table[id*="GridView"] tr.GridRow>td{border:0;padding:0;vertical-align:top;
  width:auto!important;text-align:left!important}

#content table[id*="GridView"] tr.GridRow>td:nth-child(1){grid-area:nome;
  font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.25}
#content table[id*="GridView"] tr.GridRow>td:nth-child(2){grid-area:orai;
  font-size:1.08rem;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
#content table[id*="GridView"] tr.GridRow>td:nth-child(3){grid-area:oraf;
  font-size:.74rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-3)}
#content table[id*="GridView"] tr.GridRow>td:nth-child(3)::before{
  content:"fino alle ";font-weight:400;font-size:.8rem}
#content table[id*="GridView"] tr.GridRow>td:nth-child(5){grid-area:azione;margin-top:.5rem}
#content table[id*="GridView"] tr.GridRow>td:nth-child(6){grid-area:attesa}

/* quarta cella: il quadratino colorato diventa la pastiglia di stato */
#content table[id*="GridView"] tr.GridRow>td:nth-child(4){grid-area:stato;margin-top:0;align-self:center;justify-self:end}
#content table[id*="GridView"] tr.GridRow>td:nth-child(4)>div{display:none}
#content table[id*="GridView"] tr.GridRow>td:nth-child(4){
  background:none!important;padding:0!important}
#content table[id*="GridView"] tr.GridRow>td:nth-child(4)::after{
  display:block;width:-moz-fit-content;width:fit-content;
  padding:.24rem .62rem;border-radius:999px;font-size:.75rem;font-weight:700;line-height:1.35}
#content td[style*="7EFF5E"]::after{content:"Posti disponibili";background:var(--verde-pale);color:var(--verde)}
#content td[style*="FF5E5E"]::after{content:"Completo";background:var(--rosso-pale);color:var(--rosso)}
#content td[style*="5E5EFF"]::after{content:"Hai prenotato";background:var(--acqua-pale);color:var(--acqua)}
#content td[style*="FFF15E"]::after{content:"In lista d'attesa";background:var(--ambra-pale);color:var(--ambra)}
#content td[style*="808080"]::after{content:"Non prenotabile";background:#EAE7E2;color:var(--ink-3)}
/* quando lo script conosce i posti liberi, sostituisce il testo generico */
#content tr.GridRow[data-posti] td:nth-child(4)::after{content:attr(data-testo)}

/* i due pulsanti */
#content table[id*="GridView"] a.book{display:flex;align-items:center;justify-content:center;
  width:100%;min-height:40px;padding:.5rem .9rem;border-radius:var(--r);font-size:15px;
  background:var(--taupe-deep);color:#fff;font-weight:650;text-decoration:none;cursor:pointer}
#content table[id*="GridView"] a.book:hover{background:var(--taupe);color:#fff}
#content table[id*="GridView"] td:nth-child(6) a.book{background:transparent;
  color:var(--taupe-deep);border:1.5px solid var(--line-2);margin-top:.5rem}
#content table[id*="GridView"] td:nth-child(6) a.book:hover{background:var(--taupe-pale)}
/* i link vuoti restano nel markup: vanno nascosti insieme alla loro cella */
#content table[id*="GridView"] a.book:empty{display:none}
#content table[id*="GridView"] tr.GridRow>td.vuota{display:none}
#content table[id*="GridView"] input[type=hidden]{display:none}
#content table[id*="GridView"] span[id*="lblSoglia"]:empty{display:none}
#content table[id*="GridView"] span[id*="lblSoglia"]{display:block;color:var(--rosso);
  font-size:.85rem;font-weight:600;margin-top:.4rem}

/* ---------- tabelle ------------------------------------------------------- */
#content table:not(.ui-datepicker-calendar){border-collapse:collapse;width:100%}
#content th{text-align:left;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
            color:var(--ink-3);font-weight:700;padding:.7rem .8rem .7rem 0;border-bottom:1px solid var(--line-2)}
#content td{padding:.7rem .8rem .7rem 0;border-bottom:1px solid var(--line);vertical-align:middle}

/* sul telefono le tabelle di impaginazione diventano una colonna sola */
@media(max-width:47.99rem){
  /* senza il combinatore figlio: le pagine annidano tabelle dentro tabelle e
     i livelli interni restavano larghi quanto il loro contenuto            */
  #content table:not(.ui-datepicker-calendar),
  #content tbody:not(.ui-datepicker-calendar tbody),
  #content tr,
  #content td,
  #content th{display:block;width:100%;max-width:100%}
  #content .ui-datepicker-calendar,
  #content .ui-datepicker-calendar tbody,
  #content .ui-datepicker-calendar tr,
  #content .ui-datepicker-calendar td,
  #content .ui-datepicker-calendar th{display:revert;width:auto}
  #content td,#content th{padding:.15rem 0;border:0}
  #content td:empty,#content th:empty{display:none}
  #content td[align=right]{text-align:left}
  /* le etichette dentro le celle diventano vere etichette di campo */
  #content .searchBody td>span:first-child{display:block;font-weight:600;margin:.6rem 0 .35rem;color:var(--ink)}
}

/* ---------- larghezze scritte a mano nel markup ---------------------------- */
/* Le pagine impostano Width="250px" sui controlli, che ASP.NET rende come
   style inline: senza !important una regola di foglio di stile non lo batte.
   Finche' non riscrivo pagina per pagina, questo tiene tutto a filo colonna.  */
#content input[type=text],#content input[type=password],#content input[type=email],
#content input[type=tel],#content input[type=number],#content select,#content textarea,
#content .normalTextBox{width:100%!important;max-width:100%!important}
#content input[type=checkbox],#content input[type=radio]{width:1.35rem!important}
#content table[style*="width"]{width:100%!important}
#content td[style*="width"],#content th[style*="width"]{width:auto!important}
#content div[style*="width"]:not([id*="slider"]):not(.ui-slider){width:auto!important;max-width:100%!important}

/* ---------- attesa -------------------------------------------------------- */
[id*="UpdateProgress"]{display:flex;align-items:center;gap:.7rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.1rem;margin:0 0 1rem;
  font-weight:600;color:var(--ink-2)}

/* ---------- jQuery UI ----------------------------------------------------- */
.ui-widget,.ui-widget input,.ui-widget select,.ui-widget button{font-family:var(--font);font-size:16px}
.ui-datepicker{width:min(21rem,94vw);padding:.6rem;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.ui-datepicker .ui-datepicker-header{background:none;border:0;color:var(--ink);padding:.35rem 0 .6rem}
.ui-datepicker .ui-datepicker-title{font-weight:700}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{
  width:2.6rem;height:2.6rem;top:.2rem;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line);cursor:pointer}
.ui-datepicker td{padding:2px;border:0}
.ui-datepicker td a,.ui-datepicker td span{display:flex;align-items:center;justify-content:center;
  min-height:2.9rem;padding:0;border:0;border-radius:10px;background:var(--surface-2);
  color:var(--ink);font-weight:600}
.ui-datepicker td a:hover{background:var(--taupe-pale)}
.ui-datepicker .ui-state-active,.ui-datepicker .ui-state-highlight{background:var(--taupe-deep);color:#fff}
.ui-slider{height:.55rem;margin:1.6rem .9rem 2.4rem;background:var(--taupe-pale);border:0;border-radius:999px}
.ui-slider .ui-slider-range{background:var(--taupe);border-radius:999px}
.ui-slider .ui-slider-handle{width:2.4rem;height:2.4rem;top:-.95rem;margin-left:-1.2rem;
  background:var(--surface);border:3px solid var(--taupe-deep);border-radius:999px;box-shadow:var(--sh);cursor:grab}
#timeSpan{font-size:1.25rem;font-weight:700;text-align:center}


/* ---------- pie' di pagina ------------------------------------------------ */
#footer{background:var(--dark);color:var(--on-dark-2);margin-top:1.25rem;
        padding:1.25rem .85rem calc(1.25rem + env(safe-area-inset-bottom))}
.foot__inner{max-width:var(--maxw);margin:0 auto;display:grid;gap:1rem}
.foot__brand{color:var(--on-dark);font-weight:700;font-size:1.15rem;margin:0}
.foot__meta{margin:0;font-size:.9rem;line-height:1.6}
.foot__lang{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.foot__lang label{font-size:.9rem}
.foot__lang select{width:auto;min-width:10rem;min-height:48px;background:var(--dark-2);
  color:var(--on-dark);border-color:rgba(255,255,255,.22)}
#footer a{color:var(--on-dark)}

/* ---------- da tablet in su ----------------------------------------------- */
@media(min-width:48rem){
  #content{padding:2.25rem 2rem 3.5rem}
  /* su schermo largo un campo solo stirato per mille pixel e' illeggibile:
     il pannello si contiene e i campi vanno su due colonne                  */
  .searchBody{max-width:840px;margin-inline:auto;padding:1.75rem 2rem}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.75rem}
  .field--dates,.field--action{grid-column:1/-1}
  .field--action .button{min-width:16rem}
  #slider-range{max-width:34rem}
  .card{padding:1.75rem 2rem}
  #headerimg{padding:.85rem 2rem}
  #menu>table{padding:0 1.5rem}
  #menu td a{padding:1rem 1.5rem}
  .button,input[type=submit],input[type=button]{width:auto;min-width:12rem}
  .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{flex-direction:row;justify-content:flex-end}
  .foot__inner{grid-template-columns:1fr auto;align-items:center}
  .foot__lang{grid-column:2;grid-row:1/span 2;justify-self:end}
  #footer{padding:2rem}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{#header,#menu,#footer,.skip{display:none}body{background:#fff}}


/* la legenda ripete a parole quello che le pastiglie gia' dicono: sul
   telefono ruba solo spazio                                                */
@media(max-width:47.99rem){ .legend{display:none} }

/* navigazione fra le settimane: e' un comando secondario, non deve pesare
   quanto il pulsante di ricerca                                            */
.weeknav .button{background:transparent;color:var(--taupe-deep);
  border:1.5px solid var(--line-2);box-shadow:none;font-weight:600}
.weeknav .button:hover{background:var(--taupe-pale);color:var(--taupe-deep)}

/* ---------- colore dello stato sull'intera scheda -------------------------- */
/* In un elenco di molte lezioni il colore e' l'unica cosa che si legge a colpo
   d'occhio. Le lezioni libere restano neutre con una banda verde: sono la
   norma. Le altre prendono una tinta tenue su tutta la scheda, cosi' le
   eccezioni saltano fuori.                                                   */
#content table[id*="GridView"] tr.GridRow{border-left:5px solid var(--line-2)}
#content table[id*="GridView"] tr.st-libera{border-left-color:var(--verde)}
#content table[id*="GridView"] tr.st-mia{
  background:var(--acqua-pale);border-color:rgba(78,130,150,.35);border-left-color:var(--acqua)}
#content table[id*="GridView"] tr.st-piena{
  background:var(--rosso-pale);border-color:rgba(151,64,42,.3);border-left-color:var(--rosso)}
#content table[id*="GridView"] tr.st-attesa{
  background:var(--ambra-pale);border-color:rgba(138,100,16,.32);border-left-color:var(--ambra)}
#content table[id*="GridView"] tr.st-bloccata{
  background:#EDEBE7;border-color:rgba(46,51,41,.16);border-left-color:var(--ink-3)}
#content table[id*="GridView"] tr.st-bloccata td:nth-child(1){color:var(--ink-2)}

/* sulla scheda tinta la pastiglia va su fondo chiaro, altrimenti tinta su
   tinta perde contrasto                                                      */
#content table[id*="GridView"] tr.st-mia td:nth-child(4)::after,
#content table[id*="GridView"] tr.st-piena td:nth-child(4)::after,
#content table[id*="GridView"] tr.st-attesa td:nth-child(4)::after,
#content table[id*="GridView"] tr.st-bloccata td:nth-child(4)::after{
  background:rgba(255,255,255,.8)}

/* il pulsante secondario su fondo tinto ha bisogno di un fondo proprio */
#content table[id*="GridView"] tr[class*="st-"] td:nth-child(6) a.book{
  background:rgba(255,255,255,.75);border-color:rgba(46,51,41,.2)}
#content table[id*="GridView"] tr[class*="st-"] td:nth-child(6) a.book:hover{
  background:#fff}

/* ---------- finestra di conferma ------------------------------------------ */
/* jQuery UI 1.8 scrive larghezza, altezza e posizione direttamente sul tag:
   senza !important non si scavalcano. Prima la finestra era bloccata a
   340x340 con dentro un blocco alto 200px e i due pulsanti impilati: sul
   telefono restava visibile una riga sola. Qui diventa un pannello che sale
   dal basso, alto quanto serve, con i pulsanti su una riga.                  */
.ui-dialog{padding:0;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;
  display:flex;flex-direction:column;max-height:92vh}
.ui-dialog .ui-dialog-titlebar{background:var(--surface-2);border:0;border-radius:0;
  border-bottom:1px solid var(--line);padding:.8rem 3.3rem .8rem 1.1rem;
  position:relative;flex:0 0 auto}
.ui-dialog .ui-dialog-title{float:none;margin:0;width:auto;white-space:normal;
  font-size:1.02rem;font-weight:700;line-height:1.3;color:var(--ink)}
.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.7rem;top:50%;
  width:2.4rem;height:2.4rem;margin:-1.2rem 0 0;padding:0;font-size:0;
  border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.ui-dialog .ui-dialog-titlebar-close .ui-icon{display:none}
.ui-dialog .ui-dialog-titlebar-close::after{content:"\00d7";display:block;
  font-size:1.5rem;line-height:2.3rem;text-align:center;color:var(--ink-2)}
.ui-dialog .ui-dialog-titlebar-close:hover{background:var(--taupe-pale)}
.ui-dialog .ui-dialog-content{padding:1.1rem;height:auto!important;max-height:none;
  overflow:auto;flex:1 1 auto;min-height:0;background:var(--surface);color:var(--ink)}
.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(46,51,41,.55);opacity:1}

/* contenuto: etichetta piccola sopra, valore leggibile sotto */
.dlg{display:grid;gap:.85rem}
.dlg__row{min-width:0}
/* le etichette arrivano dai file di risorse gia' con i due punti
   ("Servizio:"): in maiuscoletto spaziato starebbero male                   */
.dlg__lbl{display:block;margin:0 0 .1rem;font-size:.85rem;font-weight:600;color:var(--ink-3)}
.dlg__val{display:block;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.dlg__val--big{font-size:1.02rem;font-weight:700;line-height:1.25}
.dlg__ore{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
/* quasi sempre gli orari non sono modificabili: mostrarli come caselle vuote
   confonde. In sola lettura sono testo; appena diventano modificabili
   riprendono da soli l'aspetto di un campo.                                  */
.dlg input.dlg__ora[readonly]{background:none;border-color:transparent;
  padding:0;min-height:0;font-size:1.15rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.dlg__note{min-height:72px;resize:vertical}
/* mai sotto i 16px sui campi compilabili: iPhone ingrandisce la pagina
   da solo appena si tocca una casella con testo piu' piccolo          */
.dlg input,.dlg select,.dlg textarea{font-size:16px}
.dlg .validateTips:empty{display:none}
#dialog-message h3{margin:0 0 .35rem;font-size:1.05rem}
#dialog-message p{margin:0;color:var(--ink-2)}

/* I pulsanti su una riga sola: l'azione principale larga a destra, "Annulla"
   stretto a sinistra. jQuery UI 1.8 non permette di dare una classe ai
   pulsanti, quindi gliela assegna la pagina (dlg-ok / dlg-no): distinguerli
   per posizione non funziona, l'ordine cambia con il tipo di conferma.
   Le classi ui-state-default porterebbero il fondo azzurro del 2011.        */
.ui-dialog .ui-dialog-buttonpane{border:0;border-top:1px solid var(--line);
  background:var(--surface-2);margin:0;flex:0 0 auto;
  padding:.7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom))}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{display:flex;
  flex-wrap:nowrap;gap:.6rem;width:100%;min-width:0;float:none;margin:0}
/* width:auto e' obbligatorio: la regola generale dei pulsanti impone
   width:100%, e con flex-basis:auto "Annulla" partiva da tutta la larghezza
   schiacciando l'azione principale a una scatola di 32px.                   */
.ui-dialog .ui-dialog-buttonpane button{flex:1 1 0;width:auto;min-width:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  min-height:44px;padding:.55rem .9rem;border:0;border-radius:var(--r);
  font-family:var(--font);font-size:15px;font-weight:650;line-height:1.2;
  white-space:nowrap;overflow:hidden;
  color:#fff;background:var(--taupe-deep);background-image:none;text-shadow:none}
.ui-dialog .ui-dialog-buttonpane button:hover{background:var(--taupe);color:#fff}
.ui-dialog .ui-dialog-buttonpane button .ui-button-text{display:block;padding:0;
  line-height:inherit;overflow:hidden;text-overflow:ellipsis}
.ui-dialog .ui-dialog-buttonpane button.dlg-ok{order:2;flex:1 1 0}
.ui-dialog .ui-dialog-buttonpane button.dlg-no{order:1;flex:0 1 auto;
  padding:.6rem .9rem;
  background:transparent;color:var(--taupe-deep);border:1.5px solid var(--line-2)}
.ui-dialog .ui-dialog-buttonpane button.dlg-no:hover{
  background:var(--taupe-pale);color:var(--taupe-deep)}
/* jQuery UI aggiunge ui-state-hover / focus / active mentre si tocca il
   pulsante, e con esse il fondo a gradiente azzurro-grigio del 2011: qui i
   pulsanti devono restare del colore del tema anche sotto il dito.          */
.ui-dialog .ui-dialog-buttonpane button.ui-state-default,
.ui-dialog .ui-dialog-buttonpane button.ui-state-hover,
.ui-dialog .ui-dialog-buttonpane button.ui-state-focus,
.ui-dialog .ui-dialog-buttonpane button.ui-state-active{
  background:var(--taupe-deep);background-image:none;border:0;color:#fff;text-shadow:none}
.ui-dialog .ui-dialog-buttonpane button.dlg-no.ui-state-default,
.ui-dialog .ui-dialog-buttonpane button.dlg-no.ui-state-hover,
.ui-dialog .ui-dialog-buttonpane button.dlg-no.ui-state-focus,
.ui-dialog .ui-dialog-buttonpane button.dlg-no.ui-state-active{
  background:transparent;background-image:none;color:var(--taupe-deep);
  border:1.5px solid var(--line-2)}

@media(max-width:47.99rem){
  .ui-dialog{position:fixed!important;left:0!important;right:0!important;
    top:auto!important;bottom:0!important;width:100%!important;
    max-width:100%!important;height:auto!important;
    border-radius:20px 20px 0 0;border-bottom:0}
}

/* ---------- suggerimento "aggiungi a Home" -------------------------------- */
/* Compare solo sui telefoni, solo a chi non l'ha gia' fatto, e si puo'
   chiudere per sempre. Sta sotto la scheda di accesso, non davanti.         */
.homebar{display:flex;align-items:center;gap:.75rem;max-width:420px;
  margin:.9rem auto 0;padding:.75rem .85rem;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh)}
.homebar[hidden]{display:none}
.homebar__ico{flex:0 0 auto;width:44px;height:44px;border-radius:11px;display:block}
.homebar__txt{min-width:0;flex:1 1 auto}
.homebar__t{margin:0;font-weight:700;font-size:.95rem;color:var(--ink)}
.homebar__p{margin:.15rem 0 0;font-size:.85rem;line-height:1.4;color:var(--ink-2)}
.homebar__p b{color:var(--ink)}
.homebar__x{flex:0 0 auto;width:2rem;height:2rem;min-height:0;padding:0;
  width:2rem!important;
  background:none;border:0;border-radius:999px;
  color:var(--ink-3);font-size:1.4rem;line-height:1;cursor:pointer}
.homebar__x:hover{background:var(--taupe-pale);color:var(--ink)}

/* ---------- pannello di ricerca richiudibile ------------------------------ */
/* Il pannello occupa mezzo schermo di telefono e serve una volta sola: appena
   ci sono risultati si richiude da solo e lascia il posto alle lezioni.
   Resta a un tocco di distanza, con scritto sopra cosa si sta guardando.     */
.cerca{margin:0 0 .85rem}
.cerca__sum{display:flex;align-items:center;gap:.6rem;cursor:pointer;
  list-style:none;padding:.7rem .9rem;min-height:var(--tap);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);font-weight:700;color:var(--ink)}
.cerca__sum::-webkit-details-marker{display:none}
.cerca__sum::before{content:"";flex:0 0 auto;width:1.5rem;height:1.5rem;
  border-radius:999px;background:var(--taupe-pale) no-repeat center;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236B5749' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.cerca[open]>.cerca__sum{border-radius:var(--r-lg) var(--r-lg) 0 0;
  border-bottom:0;box-shadow:none;margin-bottom:0}
.cerca[open]>.cerca__sum::before{transform:rotate(180deg)}
.cerca__ora{font-weight:500;color:var(--ink-2);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cerca[open] .searchBody{border-radius:0 0 var(--r-lg) var(--r-lg);margin-bottom:0;
  border-top:0;padding-top:.2rem}
/* il titolo del pannello e' gia' nell'intestazione richiudibile: ripeterlo
   sotto ruba una riga e confonde                                            */
.cerca .searchHeading{display:none}



/* ---------- richiamo alle proprie prenotazioni ---------------------------- */
/* Sta in cima al calendario. Chi apre "Prenota" per disdire non deve piu'
   ritrovare la propria lezione in mezzo a quelle di tutti: da qui va dritto
   all'elenco delle sue.                                                      */
.richiamo{display:flex;align-items:center;gap:.75rem;margin:0 0 .85rem;
  padding:.7rem .9rem;min-height:var(--tap);text-decoration:none;
  background:var(--acqua-pale);border:1px solid rgba(78,130,150,.28);
  border-radius:var(--r-lg);color:#26414c}
.richiamo:hover{background:#D8E5EA;color:#26414c}
.richiamo__ico{flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:999px;
  background:var(--acqua) no-repeat center;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.richiamo__txt{min-width:0;flex:1 1 auto}
.richiamo__t{display:block;font-weight:700;font-size:.98rem;color:#1F3641}
.richiamo__p{display:block;font-size:.85rem;line-height:1.35}
.richiamo__go{flex:0 0 auto;font-size:1.3rem;line-height:1;color:var(--acqua)}

/* ---------- le mie prenotazioni ------------------------------------------- */
/* Stesso vocabolario visivo delle schede del calendario: ora grande a
   sinistra, nome del corso a destra, pastiglia di stato, azione sotto. Chi
   ha imparato a leggere il calendario legge anche questo elenco.             */
.mie__titolo{margin:0 0 .15rem}
.mie__sotto{margin:0 0 1rem;font-weight:600;color:var(--ink-2)}
.mie{display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.mie__giorno{grid-column:1/-1;margin:.6rem 0 0;padding:0 0 .5rem;
  border-bottom:2px solid var(--line-2);font-size:.92rem;font-weight:700;
  letter-spacing:-.01em;color:var(--ink)}
.mie__giorno:first-child{margin-top:0}
.mie__voce{display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"orai nome" "oraf stato" "azione azione";
  gap:.15rem .9rem;align-items:start;margin:0;padding:.65rem .8rem;
  background:var(--acqua-pale);border:1px solid rgba(78,130,150,.35);
  border-left:5px solid var(--acqua);border-radius:var(--r-lg);box-shadow:var(--sh)}
.mie__voce--attesa{background:var(--ambra-pale);border-color:rgba(138,100,16,.32);
  border-left-color:var(--ambra)}
.mie__voce p{margin:0}
.mie__ora{grid-area:orai;font-size:1.08rem;font-weight:700;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.mie__fine{grid-area:oraf;font-size:.74rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink-3)}
.mie__nome{grid-area:nome;font-size:.95rem;font-weight:700;line-height:1.25;color:var(--ink)}
.mie__stato{grid-area:stato;align-self:center;display:flex;flex-wrap:wrap;
  align-items:center;gap:.35rem .45rem}
/* pastiglia chiara sulla scheda tinta, come nel calendario */
.mie__stato .pill{background:rgba(255,255,255,.8)}
.mie__cat{font-size:.78rem;color:var(--ink-2)}
.mie__azione{grid-area:azione;margin-top:.55rem!important}
.mie__disdici{width:100%;min-height:40px;padding:.5rem .9rem;font-size:15px;
  font-weight:650;background:rgba(255,255,255,.85);color:var(--taupe-deep);
  border:1.5px solid rgba(46,51,41,.2)}
.mie__disdici:hover{background:#fff;color:var(--ink)}
.mie__nota{display:block;font-size:.85rem;line-height:1.4;color:var(--ink-2)}
/* il termine entro cui disdire senza perdere l'ingresso */
.mie__entro{display:block;font-size:.8rem;line-height:1.35;color:var(--ink-2);margin:0 0 .4rem}
.mie__coda{margin:1.25rem 0 0}

/* nessuna prenotazione attiva */
.vuoto{text-align:center}
.vuoto__t{margin:0 0 .35rem;font-size:1.05rem;font-weight:700;color:var(--ink)}
.vuoto__p{margin:0 0 1.1rem;color:var(--ink-2)}