/* === ZAPCALENDAR — APP SHELL & THEME === */
/* ============================================================
   BEAUTY.OS — DESIGN SYSTEM "FOREST PREMIUM"
   Versione 2.0 — Ridisegno completo
   ============================================================ */

:root {
  /* — Alias di compatibilità (nomi usati nei CSS dopo lo split) — */
  --ff:        var(--font);
  --fd:        var(--font-display);
  --avorio:    #F0EDE6;
  --avorio2:   #EDE8E1;
  --dark:      #0B1A14;
  --sett-header-h: 66px;   /* altezza header giorni vista settimana */
  --sett-slot-h:   48px;   /* altezza slot 30min (= slotPx in agenda.js) */

  /* — Palette Primaria — */
  --verde:          #2ECC8F;
  --verde-vivo:     #22A070;
  --verde-glow:     rgba(46,204,143,.18);
  --verde-soft:     rgba(46,204,143,.09);

  /* — Sidebar Dark Forest — */
  --sidebar-bg:     #0B1A14;
  --sidebar-bordo:  rgba(255,255,255,.06);
  --sidebar-hover:  rgba(255,255,255,.06);
  --sidebar-attivo: rgba(46,204,143,.14);
  --sidebar-testo:  rgba(255,255,255,.52);
  --sidebar-titolo: rgba(255,255,255,.88);

  /* — Superficie — */
  --sfondo:         #F0EDE6;      /* avorio caldo */
  --card:           #FFFFFF;
  --card-hover:     #FDFCFA;
  --topbar-bg:      rgba(255,255,255,.92);
  --bordo:          #E4DDD3;      /* bordo caldo */
  --bordo-soft:     #EDE8E1;

  /* — Testo — */
  --t1:             #141210;      /* quasi nero caldo */
  --t2:             #6B6560;
  --t3:             #A09890;

  /* — Semantici — */
  --confermato:     #2ECC8F;
  --confermato-bg:  #F0FDF4;
  --confermato-t:   #15803D;

  --attesa:         #F59E0B;
  --attesa-bg:      #FFFBEB;
  --attesa-t:       #B45309;

  --completato:     #6366F1;
  --completato-bg:  #EEF2FF;
  --completato-t:   #4338CA;

  --cancellato:     #F43F5E;
  --cancellato-bg:  #FFF1F2;
  --cancellato-t:   #BE123C;

  /* — Dimensioni — */
  --sidebar-w:      268px;
  --dettagli-w:     348px;
  --r:              16px;     /* raggio standard */
  --r-sm:           10px;
  --r-xs:           6px;

  /* — Ombre — */
  --shadow-xs:      0 1px 3px rgba(20,18,16,.06), 0 1px 2px rgba(20,18,16,.04);
  --shadow-sm:      0 2px 8px rgba(20,18,16,.08), 0 1px 3px rgba(20,18,16,.06);
  --shadow-md:      0 8px 24px rgba(20,18,16,.1), 0 2px 8px rgba(20,18,16,.06);
  --shadow-lg:      0 20px 48px rgba(20,18,16,.14), 0 6px 16px rgba(20,18,16,.08);
  --shadow-modal:   0 32px 80px rgba(20,18,16,.22), 0 8px 24px rgba(20,18,16,.12);
  --shadow-verde:   0 4px 16px rgba(46,204,143,.35);

  /* — Transizioni — */
  --ease:           cubic-bezier(.4,0,.2,1);
  --ease-spring:    cubic-bezier(.34,1.56,.64,1);
  --t-fast:         .15s;
  --t-med:          .22s;
  --t-slow:         .32s;

  --font: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Sans', system-ui, sans-serif;
}

/* ===================== RESET & BASE ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font);
  background: var(--sfondo);
  color: var(--t1);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===================== APP SHELL ===================== */
.app-shell {
  display: flex;
  height: 100vh;
  /* 100vh su Android e' l'altezza dello schermo CON la barra dell'indirizzo
     nascosta. Ma il documento qui non scorre mai (overflow:hidden), quindi
     la barra non si nasconde mai: il guscio era sempre piu' alto dello spazio
     visibile di ~56px, e quella striscia in fondo restava sotto il bordo
     dello schermo. 100dvh e' l'altezza davvero visibile; i browser che non
     la conoscono ignorano questa riga e tengono 100vh come prima.          */
  height: 100dvh;
  overflow: hidden;
}

/* =====================================================
   SIDEBAR — Dark Forest Premium
   ===================================================== */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 100;
  position: relative;
  /* Era `overflow: hidden`, e su un tablet la barra diventava una trappola:
     il guscio e' alto quanto lo schermo e non scorre mai (serve a tenere
     l'agenda ferma sotto la barra in alto), quindi tutto quello che non ci
     stava — dal Registro Attivita' in giu' — era semplicemente irraggiungibile.
     Nessuno se ne accorgeva da PC, dove ci sta tutto.
     In orizzontale resta tagliata: la decorazione in cima sborda apposta.  */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;      /* scorre lei, non la pagina sotto */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
  transition: width .18s ease, min-width .18s ease;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 100px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* Decorazione sottile in alto */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--verde), transparent);
  opacity: .6;
}

/* Logo area */
.sidebar-logo {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--sidebar-bordo);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* (R1) Il logo resta in cima mentre il menu scorre (Michele, 01/10: «quando
   scorro giu' con il menu il logo zapcalendar sparisce»; 05/10: «vorrei che il
   logo restasse bloccato in alto»). Solo dentro .sidebar: il menu della
   Contabilita' (#est-app #sidebar) usa la stessa classe con un altro fondo.
   Il fondo serve perche' le voci passano SOTTO il logo: e' il colore con cui
   comincia la sfumatura della barra (agenda.css, «.sidebar {»). */
.sidebar > .sidebar-logo { position: sticky; top: 0; z-index: 3; background-color: #0D1F17; }
/* (R1) la riga verde di 2px in cima alla barra resta sopra il logo, come oggi */
.sidebar::before { z-index: 4; }
/* (R1) schermi bassi (telefono girato, tablet con la tastiera aperta): il riquadro fermo occupa meno */
@media (max-height: 560px) { .sidebar > .sidebar-logo { padding-top: 12px; padding-bottom: 10px; } }

.logo-mark {
  display: flex;
  align-items: center;
}

/* Il marchio: lo stesso file del sito pubblico, versione bianca perche' la
   sidebar e' scura. Il fulmine sta dentro la parola al posto della l, percio'
   e' sparito il quadratino col fulmine di fianco — ne faceva due.
   Si misura in larghezza: il fulmine sborda sopra e sotto le lettere e
   fissare l'altezza schiaccerebbe la parola. La sidebar e' larga 268px (240
   sotto i 1200), meno 40 di padding: 150 ci sta comodo in entrambi i casi. */
.zc {
  display: block;
  width: 150px;
  height: auto;
}

/* Sezione etichette */
.nav-sezione-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  padding: 18px 20px 8px;
}

/* Operatori nella sidebar */
.sidebar-operatori {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.op-sidebar-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  border: 1px solid transparent;
}

.op-sidebar-item:hover {
  background: var(--sidebar-hover);
}

.op-sidebar-item.attivo {
  background: var(--sidebar-attivo);
  border-color: rgba(46,204,143,.25);
}

.op-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.op-sidebar-item.attivo .op-avatar {
  box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 4px 10px rgba(0,0,0,.25);
}

.op-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.op-nome { font-size: 13px; font-weight: 600; color: var(--sidebar-titolo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-ruolo { font-size: 11px; color: var(--sidebar-testo); }

/* Menu viste sidebar */
.sidebar-menu { padding: 0 10px; display: flex; flex-direction: column; gap: 2px; }

.nav-item { display:flex; align-items:center; gap:8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  color: var(--sidebar-testo);
  font-weight: 500;
  font-size: 13.5px;
  text-decoration: none;
  position: relative;
  border: 1px solid transparent;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: rgba(255,255,255,.82);
}

.nav-item.attivo {
  background: var(--sidebar-attivo);
  color: var(--verde);
  font-weight: 600;
  border-color: rgba(46,204,143,.2);
}

.nav-icona {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* =====================================================
   AREA PRINCIPALE
   ===================================================== */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Story bar operatori MOBILE */
.mobile-operatori-bar {
  display: none !important;
  padding: 8px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--bordo);
  gap: 20px;
  overflow-x: auto;
  white-space: nowrap;
  align-items: flex-start;
  scrollbar-width: none;
}
.mobile-operatori-bar::-webkit-scrollbar { display: none; }

.op-mobile-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.op-mobile-item.attivo { opacity: 1; transform: translateY(-1px); }

.op-mobile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  border: 2.5px solid transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.op-mobile-item.attivo .op-mobile-avatar {
  border-color: var(--verde);
  box-shadow: 0 0 0 2px var(--sfondo), 0 4px 12px rgba(0,0,0,.15);
}

.op-mobile-nome { font-size: 11px; font-weight: 600; color: var(--t2); }

/* =====================================================
   TOPBAR
   ===================================================== */
.topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--bordo);
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 50;
  transition: background .4s ease, border-color .4s ease;
}

/* Decorazione topbar */
.topbar::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, var(--verde), transparent);
  opacity: .5;
}

.topbar-titolo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-destra {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Navigazione data agenda */
.nav-data-agenda {
  display: flex;
  align-items: center;
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
}

.nav-data-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-data-btn {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t2);
  font-size: 13px;
  border-radius: 50%;
  transition: background var(--t-fast), color var(--t-fast);
  font-family: var(--font);
}

.nav-data-btn:hover {
  background: var(--card);
  color: var(--t1);
  box-shadow: var(--shadow-xs);
}

#testo-data-agenda {
  font-size: 13px;
  font-weight: 700;
  padding: 0 10px;
  cursor: pointer;
  color: var(--t1);
  letter-spacing: -.1px;
  min-width: 180px;
  text-align: center;
  flex-shrink: 0;
}

/* Pulsanti topbar */
.btn-top {
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t-fast) var(--ease);
  letter-spacing: -.1px;
  /* La scritta di un bottone non va mai a capo: a 1024 con un nome lungo in
     alto "Trova Posto" si spezzava su due righe e il bottone diventava alto
     il doppio. */
  white-space: nowrap;
}

.btn-top.secondario {
  background: var(--card);
  color: var(--t2);
  border: 1px solid var(--bordo);
  box-shadow: var(--shadow-xs);
}

.btn-top.secondario:hover {
  background: var(--sfondo);
  color: var(--t1);
  border-color: #CEC8BE;
}

.btn-top.primario {
  background: var(--t1);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-top.primario:hover {
  background: #2a2420;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Selettore operatore topbar */
.selettore-operatore {
  appearance: none;
  border: 1.5px solid var(--bordo);
  border-radius: 100px;
  padding: 6px 32px 6px 14px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  background: var(--card);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  outline: none;
  box-shadow: var(--shadow-xs);
}

/* =====================================================
   CONTAINER VISTE
   ===================================================== */
.vista-container { flex: 1; display: flex; overflow: hidden; }
.vista { flex: 1; display: none; overflow: hidden; flex-direction: column; }
.vista.attiva { display: flex; }
.corpo { flex: 1; display: flex; overflow: hidden; }


/* === APP SHELL: MOBILE, ICONS & SCREENSAVER === */
/* =====================================================
   BOTTOM NAVIGATION (MOBILE)
   ===================================================== */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 62px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--bordo);
  display: none;
  align-items: center;
  justify-content: space-around;
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -4px 20px rgba(11,26,20,.06);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: var(--t3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  width: 25%;
  transition: color var(--t-fast), transform var(--t-fast);
}

.bottom-nav-item.attivo {
  color: var(--verde);
  transform: translateY(-1px);
}

.bottom-nav-icona { font-size: 20px; }

/* I NUMERI ROSSI DEL MENU — uno stile solo ────────────────────────────────
   Quante richieste aspettano, quante persone ci sono da contattare oggi.
   Prima ogni voce aveva il suo: quello di Richieste scritto inline, quello
   di Promemoria con un anello bianco pensato per la barra bianca in basso,
   che sul menu laterale scuro sembrava un adesivo. Adesso sono tutti questo,
   copiato da quello di Richieste che andava gia' bene.
   Se si vede o no lo decide il JavaScript scrivendo display inline: qui c'e'
   solo com'e' fatto. Maiuscolo e spaziatura delle etichette non devono
   arrivare fin qui: e' un numero, non una parola. */
.nav-contatore {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Nella barra in basso sta appoggiato all'angolo dell'icona, piu' piccolo. */
.bottom-nav-item .nav-contatore {
  position: absolute;
  top: 2px;
  left: calc(50% + 4px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
}

/* =====================================================
   MOBILE OVERRIDES
   ===================================================== */
/* Sul tablet (fino a 1100px) la colonna dei dettagli a destra non c'e':
   larga 348px, lasciava alla giornata una striscia di 130px con i nomi
   tagliati, e mostrava quasi sempre solo "Seleziona un appuntamento". I
   dettagli si aprono nel pannello che sale dal basso, come sul telefono
   (selezionaApt in agenda.js usa la stessa soglia). */
@media (max-width: 1100px) {
  .colonna-dettagli { display: none !important; }
}
@media (max-width: 768px) {
  .sidebar { display: none !important; }
  .colonna-dettagli { display: none !important; }
  /* Il + del telefono non si imposta qui: agenda.css si carica dopo e
     ridichiara .fab con la stessa specificita', quindi questa riga non ha
     mai avuto effetto. La regola vera sta in agenda.css, subito dopo .fab. */
  /* LA BARRA IN ALTO SUL TELEFONO ─────────────────────────────────────────
     Su una riga sola non ci sta: i due gruppi chiedono 529px e su un telefono
     in verticale ce ne sono 390. Fino a ieri il di piu' veniva TAGLIATO, non
     mandato a capo, perche' .main-area ha overflow-x:hidden — e con esso
     sparivano "Trova Posto", "Esci" e la data di oggi, senza modo di
     raggiungerli nemmeno scorrendo. Su "Esci" voleva dire non poter uscire
     dal proprio account dal telefono: e' l'unico bottone di logout dell'app.

     Qui sotto c'era `.nav-data-agenda { display: none }`, cioe' l'intenzione
     giusta scritta col selettore sbagliato: quell'elemento ha un id, non una
     classe, quindi la regola non ha mai fatto niente. Ma nasconderla non era
     comunque la strada: la data non compare da nessun'altra parte nell'app.

     Si manda a capo. Il gruppo di destra da solo misura 300px e ne ha 358 a
     disposizione, quindi su una riga sua ci sta comodo. Costa una trentina di
     pixel in altezza e non nasconde niente. */
  /* !important sull'altezza perche' agenda.css dichiara `.topbar { height:58px }`
     senza media query e viene caricato DOPO questo foglio: a parita' di
     specificita' vince lui, e la seconda riga sbordava di 26px finendo sopra
     l'agenda invece di allungare la barra. Stessa ragione per cui qui accanto
     .sidebar e .bottom-nav usano gia' !important. */
  .topbar {
    padding: 8px 16px;
    height: auto !important;
    min-height: 56px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .topbar-destra {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  /* Rete per gli schermi davvero stretti (320px): sotto quella soglia la data
     si accorcia con i puntini invece di spingere fuori i bottoni. */
  #nav-data-agenda { min-width: 0; }
  #testo-data-agenda {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .btn-top span:last-child { display: none; }
  .topbar-titolo { font-size: 16px; gap: 10px; }
  .mobile-operatori-bar { display: flex; }
  .colonna-lista { padding: 14px 14px 160px; }
  .bottom-nav { display: flex !important; }
  .vista-calendario-corpo, .vista-impostazioni-corpo { padding: 14px 14px 130px; }
  .toast-container { right: 14px; bottom: 90px; left: 14px; align-items: center; }
  .toast { width: 100%; justify-content: center; max-width: 100%; }
}

/* =====================================================
   SCROLLBAR GLOBALE
   ===================================================== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bordo); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #CEC8BE; }

/* =====================================================
   LUCIDE ICONS — sistema icone globale
   ===================================================== */
svg.lucide {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke-width: 1.75;
}
.nav-item svg.lucide         { width: 17px; height: 17px; }
.btn-top svg.lucide          { width: 15px; height: 15px; }
.nav-data-btn svg.lucide     { width: 13px; height: 13px; }
.fab svg.lucide              { width: 26px; height: 26px; stroke-width: 2.2; }
.card-trattamento svg.lucide { width: 13px; height: 13px; color: var(--t3); }
.btn-azione svg.lucide       { width: 17px; height: 17px; }
.det-riga svg.lucide         { width: 15px; height: 15px; color: var(--t3); flex-shrink: 0; }
.btn-dettaglio svg.lucide    { width: 15px; height: 15px; }
.dettagli-vuoti svg.lucide   { width: 40px; height: 40px; stroke-width: 1.2; opacity: .18; }
.bottom-nav-icona svg.lucide { width: 22px; height: 22px; stroke-width: 1.8; }
.modal-titolo svg.lucide     { width: 19px; height: 19px; }
.modal-chiudi svg.lucide     { width: 14px; height: 14px; }
.riga-impo svg.lucide        { width: 17px; height: 17px; }
.giorno-riposo-icona svg.lucide { width: 44px; height: 44px; stroke-width: 1.3; }
.agenda-vuota svg.lucide     { width: 44px; height: 44px; stroke-width: 1.2; opacity:.3; }
.slot-icona-add svg.lucide   { width: 18px; height: 18px; }
.sidebar svg.lucide          { color: inherit; }
.impostazioni-titolo svg.lucide { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; }
/* Sidebar operator badge dot */
.op-sidebar-item .op-avatar svg.lucide { width:18px; height:18px; }


/* =====================================================
   SCREENSAVER
   ===================================================== */
.screensaver {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.screensaver.visibile {
  opacity: 1;
  pointer-events: all;
}

.screensaver-grid {
  flex: 1;
  display: grid;
  width: 100%;
  height: 100%;
}

/* Card operatrice nello screensaver */
.ss-card {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: filter .2s ease;
  overflow: hidden;
}

.ss-card:hover { filter: brightness(1.12); }
.ss-card:active { filter: brightness(.9); }

/* Overlay scuro sottile per leggibilità */
.ss-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.18);
}

.ss-nome {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -1px;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
  text-align: center;
  padding: 20px;
  line-height: 1.1;
}

/* Badge alert promemoria nello screensaver */
.ss-badge-alert {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #F43F5E;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  animation: pulsaAlert 1.5s ease-in-out infinite;
}

@keyframes pulsaAlert {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(244,63,94,.4); }
  50%       { transform: scale(1.15); box-shadow: 0 6px 24px rgba(244,63,94,.7); }
}

/* Orario in alto nello screensaver */
.ss-orologio {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  text-align: center;
  padding: 16px;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent);
}

/* =====================================================
   TOPBAR — versione semplificata con operatrice attiva
   ===================================================== */
.topbar-op-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-op-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.topbar-op-nome {
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -.2px;
  /* Un nome lungo non deve spingere fuori i bottoni a destra: oltre i
     160px si accorcia coi puntini. "Natasha" ne prende 60. */
  max-width: 160px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Sul telefono la prima riga ha 288px (a 320) per avatar, nome, cambio
   operatrice e campanella: con 160px di nome la campanella usciva dallo
   schermo. 110px bastano a qualsiasi nome proprio normale. Sta DOPO la
   regola base apposta, altrimenti perderebbe per ordine. */
@media (max-width: 768px) {
  .topbar-op-nome { max-width: 110px; }
}

.btn-cambia-op {
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-cambia-op:hover {
  background: var(--bordo);
  color: var(--t1);
}

/* Tasto promemoria rosso */
.btn-promemoria {
  display: none; /* mostrato solo se ci sono promemoria */
  align-items: center;
  gap: 6px;
  background: #F43F5E;
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--t-fast);
  box-shadow: 0 2px 10px rgba(244,63,94,.4);
  animation: pulsaRosso 2s ease-in-out infinite;
}

.btn-promemoria:hover {
  background: #e11d48;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(244,63,94,.5);
}

@keyframes pulsaRosso {
  0%, 100% { box-shadow: 0 2px 10px rgba(244,63,94,.4); }
  50%       { box-shadow: 0 4px 20px rgba(244,63,94,.7); }
}

.promemoria-count {
  background: rgba(255,255,255,.25);
  border-radius: 100px;
  padding: 1px 7px;
  font-size: 12px;
}

/* ================================================================
   SICUREZZA & PULSANTE LOCK TOPBAR
   ================================================================ */
.btn-lock-status {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card, #fff);
  border: 1.5px solid var(--bordo);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  font-family: var(--ff);
  transition: all .2s;
  box-shadow: 0 1px 3px rgba(20,18,16,.05);
}

.btn-lock-status:hover {
  background: var(--sfondo);
  border-color: rgba(20,18,16,.25);
  transform: translateY(-1px);
}

/* IL LUCCHETTO QUANDO LA BARRA E' STRETTA ─────────────────────────────────
   Solo l'icona, in un tondo: la parola "Bloccato" si prendeva 112px, e sul
   telefono (412px) la data finiva sotto i bottoni. Il colore dell'icona dice
   gia' lo stato — ambra chiuso, verde aperto — e il titolo lo spiega a chi
   ci passa sopra. Vale fino a 1279px e non solo sul telefono: misurato a
   1024, la barra in alto e' piena (756px su 756) e con la scritta la data si
   tagliava lo stesso. Da 1280 in su c'e' posto e la parola torna.
   Queste media query stanno DOPO .btn-lock-status apposta: se stessero con
   le altre regole del telefono, piu' in alto nel file, la regola base qui
   sopra le batterebbe per ordine, come succedeva al + verde. */
@media (max-width: 1279px) {
  .btn-lock-status {
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
    justify-content: center;
    flex-shrink: 0;
  }
  .btn-lock-status .lock-txt { display: none; }
}
/* La lente diventa un tondo uguale al lucchetto, senza la scritta "Trova
   Posto", fino a 1279px — la stessa soglia del lucchetto, cosi' i due
   bottoni restano uguali. Sul telefono sono i 14px che mancavano alla data a
   360px; a 1024 con un nome lungo in alto la scritta andava a capo su due
   righe. Da 1280 in su c'e' posto e la scritta torna. */
@media (max-width: 1279px) {
  .topbar-destra .btn-top {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
  }
  .topbar-destra .btn-top span:last-child { display: none; }
}
/* TABLET E PORTATILI PICCOLI (769-1023px) ────────────────────────────────
   Qui il menu laterale e' aperto e la barra in alto e' su una riga sola:
   misurato a 800 e a 900px, i due gruppi non ci stavano, "Trova Posto"
   andava a capo e "Esci" finiva 116px FUORI dallo schermo — l'unico modo di
   uscire dall'account, irraggiungibile. La fascia non era mai stata
   misurata: le larghezze di prova erano 768 e 1024, e questa sta in mezzo.
   Stessa soluzione del telefono: il gruppo di destra va su una riga sua.
   L'altezza vuole !important per lo stesso motivo scritto piu' su nella
   regola del telefono: agenda.css fissa .topbar a 58px e si carica dopo. */
/* 1.56.1: solo quando il menu e' LARGO. Sul tablet adesso il menu parte
   stretto (76px, vedi versione.js) e la barra in alto sta comoda su una riga:
   andando su due righe metteva la lente sotto il nome, storta. */
@media (min-width: 769px) and (max-width: 1023px) {
  :root:not([data-barra="stretta"]) .topbar {
    height: auto !important;
    min-height: 56px;
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  :root:not([data-barra="stretta"]) .topbar-destra {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
}

/* ================================================================
   MODAL TASTIERINO PIN
   ================================================================ */
.modal-pin-box {
  max-width: 360px !important;
  text-align: center;
  /* (1.101.0, revisione R0b) senza !important: nessun'altra regola mette il padding a .modal, e la finestra bassa
     (in fondo alla sezione, max-height 640px) deve poterlo stringere */
  padding: 28px 24px 30px;
}

.pin-icon-header {
  font-size: 32px;
  margin-bottom: 8px;
  line-height: 1;
}

.pin-modal-title {
  font-family: var(--fd);
  font-size: 20px;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -.3px;
  margin-bottom: 6px;
}

.pin-modal-subtitle {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.4;
  margin-bottom: 22px;
  padding: 0 10px;
}

.pin-dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--t2);   /* (1.101.0, IM16) prima --bordo: cerchi beige su bianco, quasi invisibili */
  background: transparent;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

.pin-dot.filled {
  background: var(--verde-vivo, #2ECC8F);
  border-color: var(--verde-vivo, #2ECC8F);
  box-shadow: 0 0 12px rgba(46,204,143,.45);
  transform: scale(1.15);
}

.pin-dot.error {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 12px rgba(239,68,68,.5) !important;
}

.pin-error-text {
  font-size: 12.5px;
  font-weight: 700;
  color: #dc2626;
  min-height: 18px;
  margin-bottom: 12px;
  /* (1.101.0, IM16) il posto c'e' sempre, si accende con .visibile (security-pin.js mostraErrore): prima
     compariva con display e il tastierino scendeva sotto il dito */
  visibility: hidden;
}
.pin-error-text.visibile { visibility: visible; }

/* (1.101.0, IM15/IM16) «Hai dimenticato il PIN? Tocca qui»: solo nello sblocco (hidden negli altri modi), alto 44 px,
   grigio --t2 (prima --t3, 3,03:1, alto 16 px e scritto nel tag) */
.pin-dimenticato-riga { text-align: center; margin-top: 8px; }
.pin-dimenticato { min-height: var(--tocco, 44px); padding: 0 12px; background: none; border: none; color: var(--t2);
  font-family: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.pin-dimenticato[hidden] { display: none; }

@keyframes pinShakeAnim {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

.pin-shake {
  animation: pinShakeAnim .4s ease-in-out;
}

.pin-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 270px;
  margin: 0 auto;
}

.pin-key-btn {
  height: 58px;
  border-radius: 16px;
  border: 1.5px solid var(--bordo);
  background: #fff;
  font-family: var(--fd);
  font-size: 22px;
  font-weight: 700;
  color: var(--t1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.pin-key-btn:hover {
  background: var(--sfondo);
  border-color: rgba(20,18,16,.2);
}

.pin-key-btn:active {
  transform: scale(.92);
  background: var(--bordo);
}

.pin-key-btn.action {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--ff);
  color: var(--t2);
}

/* (1.101.0, revisione R0b) LA FINESTRA DEL PIN SUGLI SCHERMI BASSI: i telefoni con le barre del browser (375x553,
   360x560) e il piu' piccolo (320x460). Con le righe della 1.101.0 (il posto fisso dell'errore, «Hai dimenticato»
   da 44 px, il testo del primo PIN su tre righe) l'ultima riga del tastierino o «Hai dimenticato» uscivano dalla
   finestra, che scorreva dentro con la barra nascosta. Si stringe solo il superfluo: niente lucchetto, meno spazi,
   tasti da 46 px (sempre sopra i 44 del dito), la finestra un po' piu' alta; sotto i 500 px il testo corto del primo
   PIN (security-pin.js, testiPrimoPin). Misurato a 320x460, 360x560 e 375x553 nei due modi (prove_r0b_veri.js,
   scena im16-basso). dvh dove c'e' (l'altezza vera con le barre), vh sui telefoni vecchi. */
.pin-sotto-corto { display: none; }
@media (max-height: 640px) {
  #modal-pin { padding: 12px; }
  #modal-pin .modal-pin-box { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 16px 18px 14px; }
  .pin-icon-header { display: none; }
  .pin-modal-title { font-size: 18px; margin-bottom: 4px; }
  .pin-modal-subtitle { margin-bottom: 10px; }
  .pin-dots-container { margin-bottom: 10px; }
  .pin-error-text { min-height: 16px; margin-bottom: 6px; }
  .pin-keypad-grid { gap: 8px; }
  .pin-key-btn { height: 46px; }
  .pin-dimenticato-riga { margin-top: 2px; }
}
@media (max-height: 500px) {
  .pin-sotto-lungo { display: none; }
  .pin-sotto-corto { display: inline; }
}

/* ================================================================
   MODAL REGISTRO ATTIVITÀ (AUDIT LOG)
   ================================================================ */
.modal-audit-box {
  max-width: 760px !important;
  max-height: 88vh !important;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden !important;
}

.modal-audit-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--bordo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

.modal-audit-toolbar {
  padding: 14px 24px;
  background: var(--sfondo);
  border-bottom: 1px solid var(--bordo);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.audit-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.audit-pills-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.audit-pill {
  padding: 5px 12px;
  border-radius: 100px;
  border: 1.5px solid var(--bordo);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  transition: all .15s;
  font-family: var(--ff);
}

.audit-pill:hover {
  background: var(--card);
  color: var(--t1);
}

.audit-pill.attivo {
  background: var(--t1);
  color: #fff;
  border-color: var(--t1);
}

.audit-search-input {
  padding: 6px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--bordo);
  font-size: 12.5px;
  outline: none;
  font-family: var(--ff);
  background: #fff;
  min-width: 200px;
  flex: 1;
}

.audit-search-input:focus {
  border-color: var(--verde-vivo, #2ECC8F);
}

.audit-select-op {
  padding: 6px 12px;
  border-radius: 100px;
  border: 1.5px solid var(--bordo);
  font-size: 12.5px;
  font-weight: 600;
  background: #fff;
  color: var(--t1);
  font-family: var(--ff);
  cursor: pointer;
}

.audit-lista-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px 30px;
}

.audit-card {
  background: #fff;
  border: 1.5px solid var(--bordo);
  border-radius: 14px;
  padding: 13px 16px;
  margin-bottom: 10px;
  transition: all .2s;
  box-shadow: 0 1px 3px rgba(20,18,16,.04);
}

.audit-card:hover {
  border-color: rgba(20,18,16,.2);
  box-shadow: 0 4px 12px rgba(20,18,16,.06);
}

.audit-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.audit-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2px;
}

.badge-rosso   { background: rgba(239,68,68,.12); color: #dc2626; }
.badge-verde   { background: rgba(46,204,143,.12); color: #15803d; }
.badge-blu     { background: rgba(59,130,246,.12); color: #2563eb; }
.badge-emerald { background: rgba(16,185,129,.15); color: #047857; }
.badge-viola   { background: rgba(139,92,246,.12); color: #7c3aed; }

.audit-op-tag {
  font-size: 12.5px;
  color: var(--t2);
}

.audit-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--t3);
}

.audit-desc {
  font-size: 13px;
  color: var(--t1);
  line-height: 1.45;
}

.btn-audit-ripristina {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 8px;
  border: none;
  background: var(--verde-vivo, #2ECC8F);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 2px 6px rgba(46,204,143,.3);
  font-family: var(--ff);
}

.btn-audit-ripristina:hover {
  background: #22A070;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(46,204,143,.4);
}

.badge-ripristinato {
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  background: rgba(46,204,143,.1);
  padding: 3px 8px;
  border-radius: 6px;
}

.audit-empty-state {
  text-align: center;
  padding: 50px 20px;
}

/* Icone dell'app: stessa famiglia della landing. La dimensione la ereditano dal
   contenitore, cosi' ogni icona sta nel suo posto senza una regola dedicata, e
   il colore segue il testo intorno. vertical-align allinea la linea di base a
   quella del testo, che un'emoji faceva da sola. */
.ic{width:1.05em;height:1.05em;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
.nav-item .ic,.impo-tab .ic,.tag-btn .ic,.btn-sidebar-action .ic{margin-right:2px}


/* =====================================================
   BARRA LATERALE STRETTA — solo le icone
   =====================================================
   Il committente l'ha chiesta guardando il tablet: la barra larga si mangia
   268px di agenda, e su uno schermo basso le ultime voci finivano sotto il
   bordo. Stretta sta in 76px e mostra solo le icone; l'etichetta diventa il
   suggerimento del sistema (attributo title), che e' gia' li'.

   Il calendario non si "comprime": sette colonne in 76px non si leggono. Al
   suo posto compare il giorno di oggi, e cliccandolo la barra si riapre.

   Lo stato sta su <html data-barra="stretta">, cosi' versione.js lo puo'
   rimettere prima che la pagina si disegni. */
:root[data-barra="stretta"] .sidebar {
  width: 76px;
  min-width: 76px;
}
/* Tutto quello che sparisce va cercato DENTRO .sidebar: le stesse classi
   (.nav-testo su tutte) esistono anche nel menu della Contabilita', che ha
   una vita sua e sul telefono si apre largo. Senza questo ambito, li' si
   vedevano le icone senza le parole. */
:root[data-barra="stretta"] .sidebar .nav-testo,
:root[data-barra="stretta"] .sidebar .nav-sezione-label,
:root[data-barra="stretta"] .sidebar .mini-cal,
:root[data-barra="stretta"] .sidebar .op-info,
:root[data-barra="stretta"] .sidebar .logo-mark {
  display: none;
}
:root[data-barra="stretta"] .sidebar-logo {
  justify-content: center;
  padding: 18px 8px 14px;
}
/* Anche queste solo DENTRO .sidebar (1.56.1): senza, a barra stretta il
   menu della Contabilita' — che usa la stessa classe .nav-item e sul
   telefono si apre largo col tasto hamburger — aveva le voci centrate e
   senza margine, come se fosse stretto anche lui. */
:root[data-barra="stretta"] .sidebar .nav-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}
/* Il pallino dei compleanni e il lucchetto della contabilita' hanno
   margin-left:auto scritto inline: a barra stretta li spingerebbe fuori.
   Diventano un puntino appoggiato all'angolo dell'icona. */
:root[data-barra="stretta"] .sidebar .nav-item > span:not(.nav-testo) {
  position: absolute;
  top: 6px;
  right: 14px;
  margin: 0 !important;
}
:root[data-barra="stretta"] .sidebar .nav-item { position: relative; }
:root[data-barra="stretta"] .sidebar-menu { padding: 0 6px; }
:root[data-barra="stretta"] .op-sidebar-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
:root[data-barra="stretta"] .sidebar-operatori { padding-left: 6px; padding-right: 6px; }

/* Il tasto che stringe e allarga */
.barra-tasto {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.72);
  cursor: pointer;
  transition: background .15s, color .15s, transform .18s;
}
.barra-tasto:hover { background: rgba(255,255,255,.12); color: #fff; }
:root[data-barra="stretta"] .barra-tasto { transform: rotate(180deg); }

/* Il calendario compatto: si vede solo a barra stretta */
.mini-cal-stretto { display: none; }
:root[data-barra="stretta"] .mini-cal-stretto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 46px; height: 46px;
  margin: 12px auto 4px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  cursor: pointer;
  transition: background .15s;
}
:root[data-barra="stretta"] .mini-cal-stretto:hover { background: rgba(255,255,255,.12); }
.mcs-mese { font-size: 8.5px; font-weight: 800; letter-spacing: .06em; color: var(--verde, #2ECC8F); line-height: 1; }
.mcs-giorno { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.1; }

/* Sul telefono la barra laterale non c'e' proprio (c'e' la navigazione in
   basso), quindi la versione stretta non deve nemmeno provare a comparire. */
@media (max-width: 900px) {
  :root[data-barra="stretta"] .mini-cal-stretto { display: none; }
}

/* Col dito il bersaglio deve essere piu' grande: 30px si sbagliano, e la
   barra stretta il committente la usera' soprattutto sul tablet. */
@media (pointer: coarse) {
  .barra-tasto { width: 40px; height: 40px; }
  :root[data-barra="stretta"] .mini-cal-stretto { width: 54px; height: 54px; }
  :root[data-barra="stretta"] .sidebar .nav-item { padding-top: 11px; padding-bottom: 11px; }
}