/* ==========================================================================
   EpimWeb v2 — foglio di stile

   Impianto: la settimana e' divisa in due fasce sovrapposte che condividono
   le stesse sette colonne. L'allineamento fra le due zone e' garantito da
   un'unica griglia CSS ripetuta identica in quattro punti (intestazione,
   zona libera, contatori, zona oraria): la variabile --canale tiene la
   colonna di sinistra della stessa larghezza ovunque.

   Il cromo e' volutamente spento: i colori veri sono quelli dei calendari e
   delle categorie, e devono poter parlare senza concorrenza.
   ========================================================================== */

:root {
  /* Struttura */
  --canale: 52px;          /* colonna di sinistra: ore e allineamento */
  --lato: 208px;           /* barra dei calendari */
  --barra-h: 50px;
  --altezza-oraria: 240px; /* la maniglia scrive qui */
  --ora-h: 42px;           /* altezza di un'ora nella zona oraria */
  --blocco-h: 96px;        /* altezza minima di un impegno senza orario */

  /* Inchiostri */
  --sfondo: #EEF0F3;
  --carta: #FFFFFF;
  --testo: #1A1E23;
  --tenue: #6A727C;
  --linea: #DBDFE5;
  --linea-forte: #C2C8D0;

  /* Interazione */
  --accento: #2B4570;
  --accento-tenue: #E7ECF4;
  --oggi: #FBF3DC;
  --oggi-linea: #E0C168;

  /* Stati dell'evento */
  --fatto-fondo: #E3F1D8;
  --fatto-linea: #7FAE5E;

  --raggio: 3px;
  --ombra: 0 1px 2px rgba(20, 30, 45, .10);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 13px/1.35 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   BARRA SUPERIORE
   ========================================================================== */

.guscio { display: flex; flex-direction: column; height: 100%; }

.barra {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--barra-h);
  padding: 0 12px;
  background: var(--carta);
  border-bottom: 1px solid var(--linea-forte);
  flex: none;
}

.navigazione { display: flex; align-items: center; gap: 2px; }

.passo, .oggi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  padding: 0 9px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--testo);
  text-decoration: none;
  font-size: 13px;
}
.passo { width: 27px; padding: 0; font-size: 17px; line-height: 1; }
.passo:hover, .oggi:hover { background: var(--accento-tenue); border-color: var(--accento); }

.periodo {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}

.stato-barra { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.conteggio { color: var(--tenue); font-size: 12px; font-variant-numeric: tabular-nums; }

.apri-lato {
  display: none;
  width: 30px; height: 27px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  cursor: pointer;
}

/* ==========================================================================
   CORPO E BARRA LATERALE
   ========================================================================== */

.corpo { display: flex; flex: 1; min-height: 0; }

.lato {
  width: var(--lato);
  flex: none;
  padding: 12px 10px;
  background: var(--carta);
  border-right: 1px solid var(--linea-forte);
  overflow-y: auto;
}

.lato h2 {
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tenue);
}
.lato h2:not(:first-child) { margin-top: 18px; }

.elenco-calendari, .legenda { list-style: none; margin: 0; padding: 0; }

.elenco-calendari li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 5px;
  border-radius: var(--raggio);
  cursor: pointer;
}
.elenco-calendari li:hover { background: var(--accento-tenue); }
.elenco-calendari .vuoto { color: var(--tenue); cursor: default; }
.elenco-calendari .vuoto:hover { background: none; }

.pastiglia {
  width: 11px; height: 11px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.34);
  flex: none;
}
.nome-cal { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elenco-calendari li.spento .nome-cal,
.elenco-calendari li.spento .pastiglia { opacity: .34; }

/* Il puntino che ricorda: quello che scrivi qui esce dalla macchina. */
.punto-ms {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accento);
  flex: none;
}

.legenda li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
  color: var(--tenue);
  font-size: 12px;
}
.quadrato-cat { width: 8px; height: 8px; background: #84EFF7; border: 1px solid rgba(0,0,0,.25); }
.barra-completo { width: 11px; height: 11px; background: var(--fatto-fondo); border: 1px solid var(--fatto-linea); }

/* ==========================================================================
   GRIGLIA — le quattro fasce allineate
   ========================================================================== */

.griglia {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--sfondo);
}

/* La griglia condivisa. Ripetuta identica: e' cio' che tiene allineate
   la zona libera e quella oraria. */
.intestazione-giorni,
.colonne-libera,
.contatori,
.telaio-ore {
  display: grid;
  grid-template-columns: var(--canale) repeat(7, minmax(0, 1fr));
}

.canale { border-right: 1px solid var(--linea); }

/* --- Intestazione dei giorni --- */
.intestazione-giorni {
  flex: none;
  background: var(--carta);
  border-bottom: 1px solid var(--linea-forte);
}

.giorno-testa {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 5px 4px;
  border-right: 1px solid var(--linea);
}
.giorno-testa:last-child { border-right: 0; }
.giorno-testa .sigla {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tenue);
}
.giorno-testa .numero { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.giorno-testa.festivo .sigla { color: #A8534C; }
.giorno-testa.e-oggi { background: var(--oggi); box-shadow: inset 0 -2px 0 var(--oggi-linea); }

/* ==========================================================================
   ZONA LIBERA — la fascia grande, senza ore
   ========================================================================== */

.zona-libera {
  flex: 1;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  background: var(--carta);
  overflow: hidden;
}

/* Scorrimento UNICO per tutte e sette le colonne: scendono insieme e
   restano allineate. Sette barre indipendenti sarebbero inutilizzabili. */
.scorrimento-libera { flex: 1; overflow-y: auto; overflow-x: hidden; }

.colonne-libera { min-height: 100%; align-items: stretch; }

.colonna-libera {
  border-right: 1px solid var(--linea);
  padding: 4px;
  min-height: 100%;
}
.colonna-libera:last-child { border-right: 0; }
.colonna-libera.festivo { background: #FAFAFB; }
.colonna-libera.e-oggi { background: var(--oggi); }
.colonna-libera.bersaglio { background: var(--accento-tenue); }

.lista { list-style: none; margin: 0; padding: 0; min-height: 40px; }

/* --- Il blocco, uguale nelle due zone ---
   Deve essere abbastanza alto da contenere piu' righe di testo formattato:
   nella zona libera il blocco NON e' un'etichetta, e' il contenuto. */
.blocco {
  position: relative;
  margin-bottom: 4px;
  padding: 6px 14px 7px 9px;
  min-height: 34px;
  background: var(--carta);
  border: 1px solid var(--linea-forte);
  border-left: 5px solid var(--linea-forte);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  cursor: grab;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
}

/* Nella fascia libera il blocco ha un'altezza minima anche quando il
   testo e' una riga sola: sono impegni su cui si scrive, non etichette,
   e devono avere lo stesso ingombro di quelli lunghi. Il quadratino
   della categoria sta in basso a destra e ha bisogno del suo spazio. */
.colonna-libera .blocco {
  min-height: var(--blocco-h);
  padding-bottom: 16px;
}
.blocco:hover { border-color: var(--accento); }
.blocco.in-volo { opacity: .4; }
/* Un impegno CHIUSO non cambia colore - il colore appartiene al calendario
   e deve restare riconoscibile. Si riconosce da due segni, come in EPIM:
   il testo BARRATO e il simbolino di stato a sinistra. */
.blocco.fatto .testo,
.barra-giornaliera.fatto .testo {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  opacity: .70;
}

.blocco .testo { word-break: break-word; white-space: pre-wrap; }
.blocco .testo b, .blocco .testo strong { font-weight: 700; }
.blocco .testo ul, .blocco .testo ol { margin: 2px 0 0; padding-left: 17px; }
.blocco .testo li { margin: 1px 0; }
.blocco .testo a { color: var(--accento); }

/* Simbolino di stato, a sinistra del testo come in EssentialPIM.
   Aperto: quadratino vuoto. Chiuso: quadratino verde con la spunta. */
.stato {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
  border-radius: 2px;
  border: 1px solid #97A0AB;
  background: #fff;
  flex: none;
}
.stato.chiuso {
  background: #2E7D32;
  border-color: #1B5E20;
  position: relative;
}
.stato.chiuso::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* L'ora, quando c'e', precede il testo senza rubargli spazio */
.blocco .ora {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--tenue);
  margin-right: 5px;
}
.blocco.fatto .ora { opacity: .62; }

/* Quadratino della categoria: in basso a destra, come in EPIM */
.blocco .categoria {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 11px; height: 11px;
  border: 1px solid rgba(0,0,0,.32);
  border-radius: 2px;
}

/* Avanzamento parziale: tacca in fondo al blocco. */
.blocco .avanzamento {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: rgba(30, 60, 100, .45);
}

/* Pallino Microsoft: in alto a destra, non confondibile col quadratino */
.blocco .ms {
  position: absolute;
  right: 3px;
  top: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accento);
}

/* --- Contatori "+N": cosa resta sotto la piega --- */
.contatori {
  flex: none;
  border-top: 1px solid var(--linea);
  background: var(--carta);
  min-height: 0;
}
.cella-contatore {
  border-right: 1px solid var(--linea);
  text-align: center;
  font-size: 11px;
  color: var(--accento);
  padding: 0;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cella-contatore:last-child { border-right: 0; }
.cella-contatore:not(:empty) { padding: 2px 0; }
.cella-contatore:hover:not(:empty) { background: var(--accento-tenue); }

/* ==========================================================================
   MANIGLIA — il confine trascinabile
   ========================================================================== */

.maniglia {
  flex: none;
  height: 9px;
  background: var(--sfondo);
  border-top: 1px solid var(--linea-forte);
  border-bottom: 1px solid var(--linea-forte);
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.maniglia:hover, .maniglia:focus-visible { background: var(--accento-tenue); }
.maniglia .presa {
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--linea-forte);
}
.maniglia:hover .presa { background: var(--accento); }

/* La maniglia della fascia giornalieri e' piu' sottile: separa due cose
   vicine, non due mondi. */
.maniglia.sottile { height: 7px; }
.maniglia.sottile[hidden] { display: none; }
.maniglia.sottile .presa { width: 34px; height: 2px; }

/* ==========================================================================
   ZONA ORARIA — l'asse delle ore
   ========================================================================== */

.zona-oraria {
  flex: none;
  height: var(--altezza-oraria);
  min-height: 0;
  background: var(--carta);
  overflow: hidden;
}
.scorrimento-oraria { height: 100%; overflow-y: auto; overflow-x: hidden; }

.telaio-ore { position: relative; }

.canale-ore { position: relative; border-right: 1px solid var(--linea); }

.etichetta-ora {
  position: absolute;
  right: 5px;
  transform: translateY(-50%);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--tenue);
}

.colonna-oraria {
  position: relative;
  border-right: 1px solid var(--linea);
}
.colonna-oraria:last-child { border-right: 0; }
.colonna-oraria.festivo { background: #FAFAFB; }
.colonna-oraria.e-oggi { background: var(--oggi); }

/* Righe delle ore, disegnate in sfondo per non moltiplicare gli elementi */
.telaio-ore .righe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--linea) 0 1px,
    transparent 1px var(--ora-h)
  );
}

.blocco-orario {
  position: absolute;
  left: 1px;
  padding: 3px 11px 3px 6px;
  min-height: 0;
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
}

/* Linea dell'ora corrente */
.adesso {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: #C0392B;
  pointer-events: none;
  z-index: 3;
}
.adesso::before {
  content: "";
  position: absolute;
  left: -3px; top: -2.5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #C0392B;
}

/* ==========================================================================
   MODALE
   ========================================================================== */

.velo {
  position: fixed;
  inset: 0;
  background: rgba(16, 22, 30, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 40;
}
.velo[hidden] { display: none; }

.modale {
  width: min(520px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--carta);
  border-radius: 5px;
  box-shadow: 0 12px 40px rgba(10, 18, 30, .30);
}

.modale-testa {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--linea);
}
.modale-testa h2 { margin: 0; font-size: 14px; font-weight: 600; }
.chiudi {
  margin-left: auto;
  width: 26px; height: 26px;
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--tenue);
  cursor: pointer;
  border-radius: var(--raggio);
}
.chiudi:hover { background: var(--sfondo); color: var(--testo); }

.modale-corpo { padding: 14px; overflow-y: auto; }

.campo { display: block; margin-bottom: 11px; }
/* Il campo del testo non e' un <label> ma un <div>: la sua intestazione
   va resa uguale a quella degli altri campi. */
div.campo > span:first-child {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tenue);
}
.campo > span {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tenue);
}
.coppia { display: flex; gap: 11px; }
.coppia .campo { flex: 1; }

.campo input, .campo select, .editor {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  font: inherit;
  color: var(--testo);
}
.campo input:focus, .campo select:focus, .editor:focus {
  outline: 2px solid var(--accento);
  outline-offset: -1px;
  border-color: var(--accento);
}
.editor {
  min-height: 108px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  line-height: 1.45;
}
.editor ul, .editor ol { margin: 3px 0; padding-left: 20px; }

/* --- Barra di formattazione --- */
.fmt-barra {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px 4px;
  border: 1px solid var(--linea-forte);
  border-bottom: 0;
  border-radius: var(--raggio) var(--raggio) 0 0;
  background: var(--sfondo);
  flex-wrap: wrap;
}

.fmt {
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--testo);
  cursor: pointer;
  line-height: 1;
}
.fmt:hover { background: var(--carta); border-color: var(--linea-forte); }
.fmt s { text-decoration: line-through; }

.fmt-sep {
  width: 1px;
  height: 17px;
  margin: 0 3px;
  background: var(--linea-forte);
}

.fmt-tavolozza { position: relative; display: inline-flex; }
.fmt-apri::after {
  content: "▾";
  font-size: 8px;
  margin-left: 2px;
  color: var(--tenue);
}

.fmt-colori {
  display: none;
  position: absolute;
  top: 26px;
  left: 0;
  z-index: 5;
  padding: 5px;
  gap: 4px;
  background: var(--carta);
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  box-shadow: 0 3px 12px rgba(10, 18, 30, .20);
  width: 96px;
  flex-wrap: wrap;
}
.fmt-tavolozza.aperta .fmt-colori { display: flex; }

.fmt-colore {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .28);
  border-radius: 2px;
  cursor: pointer;
}
.fmt-colore:hover { outline: 2px solid var(--accento); outline-offset: 1px; }

.avviso {
  margin: 0;
  padding: 7px 9px;
  border-radius: var(--raggio);
  background: #FDF3D8;
  border: 1px solid #E3C56A;
  font-size: 12px;
}
.avviso[hidden] { display: none; }

.modale-piede {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid var(--linea);
}
.modale-piede .spazio { flex: 1; }
.modale-piede button {
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  font: inherit;
  cursor: pointer;
}
.modale-piede button:hover { background: var(--sfondo); }
.salva { background: var(--accento) !important; border-color: var(--accento) !important; color: #fff; }
.salva:hover { filter: brightness(1.12); }
.elimina { color: #9C332B; }

/* ==========================================================================
   SCHERMI PICCOLI
   La vista resta la settimana, come sul computer: scorre in orizzontale.
   ========================================================================== */

@media (max-width: 860px) {
  :root { --canale: 40px; --lato: 200px; }

  .apri-lato { display: inline-flex; align-items: center; justify-content: center; }

  .lato {
    position: fixed;
    top: var(--barra-h);
    bottom: 0;
    left: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 3px 0 14px rgba(10, 18, 30, .16);
  }
  .lato.aperto { transform: none; }

  .periodo { font-size: 13px; }

  /* Le sette colonne restano sette: si scorre di lato invece di ridurle
     a poltiglia. */
  .griglia { overflow-x: auto; }
  .intestazione-giorni,
  .colonne-libera,
  .contatori,
  .telaio-ore {
    grid-template-columns: var(--canale) repeat(7, minmax(96px, 1fr));
    min-width: 760px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   ACCESSO
   ========================================================================== */

.ingresso {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--sfondo);
}

.scheda-accesso {
  width: min(340px, 100%);
  padding: 26px 24px 22px;
  background: var(--carta);
  border: 1px solid var(--linea-forte);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(15, 25, 40, .10);
}

.scheda-accesso h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Le quattro lettere riprendono i colori dell'icona. */
.scheda-accesso h1::first-letter { color: #C0392B; }

.sottotitolo {
  margin: 2px 0 20px;
  color: var(--tenue);
  font-size: 13px;
}

.scheda-accesso .campo { margin-bottom: 14px; }

.con-occhio { position: relative; display: block; }
.con-occhio input { padding-right: 38px; }
.occhio {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 26px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.codice {
  font-size: 22px;
  letter-spacing: .32em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.primario {
  width: 100%;
  height: 36px;
  margin-top: 4px;
  border: 1px solid var(--accento);
  border-radius: var(--raggio);
  background: var(--accento);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.primario:hover { filter: brightness(1.12); }

.errore {
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 1px solid #D9A5A0;
  border-radius: var(--raggio);
  background: #FBEBEA;
  color: #8E2F27;
  font-size: 12.5px;
}

.nota {
  margin: 12px 0 0;
  color: var(--tenue);
  font-size: 11.5px;
  text-align: center;
}
.nota a { color: var(--accento); }

/* Utente ed uscita nella barra superiore */
.utente {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tenue);
  font-size: 12px;
}
.utente a { color: var(--accento); text-decoration: none; }
.utente a:hover { text-decoration: underline; }

/* ==========================================================================
   MINI CALENDARIO
   Riproduce quello di EssentialPIM: numeri di settimana a sinistra,
   festivi in rosso, oggi in blu pieno.
   ========================================================================== */

.mini {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
}

.mini-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.mini-titolo {
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.mini-passo {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--tenue);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.mini-passo:hover { background: var(--accento-tenue); color: var(--accento); }

.mini-griglia {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}

.mini-griglia th {
  padding: 2px 0 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--tenue);
  text-align: center;
}
.mini-griglia th.mini-festivo { color: #A8534C; }

/* Colonna dei numeri di settimana */
.mini-sett {
  width: 20px;
  text-align: center;
  color: #A6ADB6;
  font-size: 10px;
  border-right: 1px solid var(--linea);
  padding-right: 3px;
}

/* Il colore sta sul riquadro interno, non sulla cella: cosi' ha sempre
   la stessa dimensione e resta centrato, qualunque sia la larghezza della
   colonna. Colorando la cella, l'evidenziazione di oggi si allargava
   quanto la colonna e il numero appariva spostato a sinistra. */
.mini-giorno {
  padding: 1px 0;
  text-align: center;
  cursor: pointer;
  background: none;
}
.mini-giorno span {
  display: inline-block;
  width: 21px;
  line-height: 19px;
  border-radius: 3px;
  text-align: center;
}
.mini-giorno.festivo { color: #C0392B; }
.mini-giorno.altro-mese { color: #AEB4BC; }
.mini-giorno.altro-mese.festivo { color: #D9A8A3; }
.mini-giorno:hover span { outline: 1px solid var(--accento); }

/* IL QUADRATINO GRIGIO: sono i giorni che hanno impegni, di qualunque
   calendario, compresi quelli che arrivano da Outlook. E' il segno che
   rende utile il calendarietto a colpo d'occhio. */
.mini-giorno.pieno span {
  background: #C3CAD3;
  box-shadow: inset 0 0 0 1px #AEB7C2;
}
.mini-giorno.altro-mese.pieno span { background: #DCE0E5; box-shadow: none; }

.mini-giorno.oggi span {
  background: var(--accento);
  color: #fff;
  font-weight: 700;
}
.mini-giorno.scelto:not(.oggi) span {
  box-shadow: inset 0 0 0 1px var(--accento);
  font-weight: 700;
}

.mini-oggi {
  width: 100%;
  margin-top: 7px;
  height: 24px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  font: inherit;
  font-size: 11.5px;
  color: var(--testo);
  cursor: pointer;
}
.mini-oggi:hover { background: var(--accento-tenue); border-color: var(--accento); }

/* La barra laterale diventa una colonna: il calendarietto si appoggia in
   fondo grazie al margin-top automatico. */
.lato { display: flex; flex-direction: column; }

/* Pulsante di creazione nella barra superiore */
.nuovo {
  height: 27px;
  padding: 0 12px;
  border: 1px solid var(--accento);
  border-radius: var(--raggio);
  background: var(--accento);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.nuovo:hover { filter: brightness(1.12); }

/* Lo spazio vuoto delle colonne accetta il doppio clic: si vede al
   passaggio che li' si puo' creare qualcosa. */
.colonna-libera:hover .lista:empty::after {
  content: "doppio clic per aggiungere";
  display: block;
  padding: 8px 4px;
  text-align: center;
  font-size: 10.5px;
  color: #AEB4BC;
}


/* ==========================================================================
   MARCHIO
   ========================================================================== */

.marchio {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}
.marchio img { border-radius: 6px; display: block; }

.marchio-grande {
  display: block;
  margin: 0 auto 12px;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(13, 13, 26, .28);
}
.scheda-accesso { text-align: center; }
.scheda-accesso .campo { text-align: left; }

/* ==========================================================================
   TRASCINAMENTO
   Rifatto con gli eventi del puntatore: sul computer arriva dal mouse, sul
   telefono dal dito, con lo stesso codice. Quello nativo del browser sugli
   schermi tattili non esiste.
   ========================================================================== */

/* Mentre si trascina, la pagina non deve scorrere sotto il dito ne'
   selezionare testo sotto il mouse. */
body.in-trascinamento {
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: grabbing;
}

/* La copia che segue il dito */
.fantasma {
  position: fixed;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  opacity: .92;
  transform: rotate(1.2deg) scale(1.02);
  box-shadow: 0 8px 22px rgba(12, 20, 34, .30);
  cursor: grabbing;
}

/* Il vuoto che mostra dove finirebbe se lo si lasciasse adesso */
.segnaposto {
  min-height: var(--blocco-h);
  margin-bottom: 4px;
  border: 1px dashed var(--accento);
  border-radius: var(--raggio);
  background: var(--accento-tenue);
  list-style: none;
}

.colonna-oraria.bersaglio { background: var(--accento-tenue); }

/* Sugli schermi tattili il trascinamento parte dopo una breve pressione,
   altrimenti ogni scorrimento della pagina lo farebbe partire. */
.blocco { touch-action: pan-y; }


/* ==========================================================================
   FINESTRA DELL'AMBITO (ricorrenze)
   ========================================================================== */

.modale.stretta { width: min(400px, 100%); }

.domanda { margin: 0 0 12px; font-size: 13px; }

.scelte { display: flex; flex-direction: column; gap: 7px; }

.scelta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 11px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.scelta:hover { background: var(--accento-tenue); border-color: var(--accento); }
.scelta b { font-size: 13px; font-weight: 600; }
.scelta span { font-size: 11.5px; color: var(--tenue); }

.avviso.ricorrente {
  margin-top: 8px;
  background: #E9EFF8;
  border-color: #A9BEDC;
}


/* ==========================================================================
   FASCIA DEGLI IMPEGNI DI TUTTO IL GIORNO
   Subito sotto le date, come in EssentialPIM: una barra piena per l'intera
   larghezza del giorno. Compare solo se c'e' qualcosa.
   ========================================================================== */

.fascia-giornalieri {
  flex: none;
  background: var(--carta);
  max-height: 108px;      /* finche' non la si regola, si adatta al contenuto */
  overflow-y: auto;
}
.fascia-giornalieri[hidden] { display: none; }

/* Una volta trascinata la maniglia, l'altezza e' quella decisa dall'utente
   e non c'e' piu' un tetto. Doppio clic sulla maniglia per tornare
   all'adattamento automatico. */
.fascia-giornalieri.regolata {
  height: var(--altezza-giornalieri, 108px);
  max-height: none;
}

.giornalieri {
  display: grid;
  grid-template-columns: var(--canale) repeat(7, minmax(0, 1fr));
  min-height: 26px;
}

.etichetta-giorno {
  display: block;
  padding: 4px 4px 0;
  font-size: 9px;
  line-height: 1.1;
  text-align: right;
  color: var(--tenue);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cella-giornaliera {
  border-right: 1px solid var(--linea);
  padding: 3px;
}
.cella-giornaliera:last-child { border-right: 0; }
.cella-giornaliera.festivo { background: #FAFAFB; }
.cella-giornaliera.e-oggi { background: var(--oggi); }

.barra-giornaliera {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
  padding: 3px 7px;
  background: #FCEFC7;                     /* giallo come in EPIM */
  border: 1px solid #E0C168;
  border-left: 4px solid #E0C168;
  border-radius: var(--raggio);
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  overflow: hidden;
}
.barra-giornaliera:hover { border-color: var(--accento); }
.barra-giornaliera .testo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Casella "tutto il giorno" nella modale */
.spunta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  font-size: 12.5px;
  cursor: pointer;
}
.spunta input { width: auto; }

/* Duplicazione */
.duplica { color: var(--accento); }

/* Mentre si copia col trascinamento, il fantasma porta un piu' */
.fantasma.copia { outline: 2px solid #2E7D32; }
.fantasma.copia::before {
  content: "+";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2E7D32;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ==========================================================================
   NOTE
   Elenco a sinistra, editor a destra, linguette dei fogli in fondo: la
   stessa disposizione di EssentialPIM.
   ========================================================================== */

.lato-note { width: 260px; padding: 0; }

.cerca-riga {
  padding: 9px 10px;
  border-bottom: 1px solid var(--linea);
}
.cerca-riga input {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  font: inherit;
  background: var(--carta);
}
.cerca-riga input:focus {
  outline: 2px solid var(--accento);
  outline-offset: -1px;
}

.elenco-note {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.elenco-note .vuoto {
  padding: 16px 12px;
  color: var(--tenue);
  font-size: 12.5px;
}

.voce-nota {
  position: relative;
  padding: 9px 11px;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
}
.voce-nota:hover { background: var(--accento-tenue); }
.voce-nota.scelta {
  background: var(--accento-tenue);
  box-shadow: inset 3px 0 0 var(--accento);
}

.voce-titolo {
  font-weight: 600;
  font-size: 12.5px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stellina { color: #E0A800; }

.voce-anteprima {
  font-size: 11.5px;
  color: var(--tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quanti-fogli {
  position: absolute;
  right: 8px;
  top: 9px;
  font-size: 10px;
  color: var(--tenue);
  background: var(--sfondo);
  border-radius: 8px;
  padding: 1px 6px;
}

/* --- Editor ------------------------------------------------------------ */

.editore {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--carta);
}

.niente-selezione {
  margin: auto;
  max-width: 380px;
  padding: 24px;
  text-align: center;
}
.niente-selezione .grosso { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.niente-selezione .nota { text-align: center; }

.pannello-nota {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pannello-nota[hidden] { display: none; }

.testa-nota {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea);
}

.titolo-nota {
  flex: 1;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--testo);
}
.titolo-nota:hover { border-color: var(--linea); }
.titolo-nota:focus {
  outline: none;
  border-color: var(--accento);
  background: var(--carta);
}

.stella {
  width: 30px; height: 28px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  color: var(--tenue);
}
.stella.accesa { color: #E0A800; border-color: #E0A800; }

.elimina-nota {
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  font: inherit;
  font-size: 12px;
  color: #9C332B;
  cursor: pointer;
}
.elimina-nota:hover { background: #FBEBEA; border-color: #D9A5A0; }

/* La barra di formattazione qui e' agganciata sotto la testata */
.pannello-nota .fmt-barra {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  border-top: 0;
  border-bottom: 1px solid var(--linea);
}

.editor.grande {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.55;
}
.editor.grande:focus { outline: none; }
/* Il corpo occupa tutto lo spazio disponibile: si clicca ovunque, anche
   sotto l'ultima riga, e il cursore va a fondo testo. */
.editor.grande { cursor: text; }
.editor.grande ul, .editor.grande ol { padding-left: 24px; }
.editor.grande li { margin: 2px 0; }
.editor.grande table { border-collapse: collapse; margin: 6px 0; }
.editor.grande td, .editor.grande th {
  border: 1px solid var(--linea-forte);
  padding: 3px 7px;
}
.editor.grande a { color: var(--accento); }

/* --- Linguette dei fogli ----------------------------------------------- */

.linguette {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 10px;
  background: var(--sfondo);
  border-top: 1px solid var(--linea-forte);
  overflow-x: auto;
}

.linguetta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 5px 11px;
  border: 1px solid var(--linea-forte);
  border-bottom: 0;
  border-radius: var(--raggio) var(--raggio) 0 0;
  background: #E4E7EB;
  font: inherit;
  font-size: 12px;
  color: var(--tenue);
  cursor: pointer;
  white-space: nowrap;
}
.linguetta:hover { background: var(--accento-tenue); }
.linguetta.attiva {
  background: var(--carta);
  color: var(--testo);
  font-weight: 600;
  margin-bottom: -1px;
  padding-bottom: 6px;
}
.linguetta.aggiungi { padding: 5px 10px; font-size: 14px; line-height: 1; }

.chiudi-foglio {
  font-size: 14px;
  line-height: 1;
  color: var(--tenue);
  opacity: .55;
}
.chiudi-foglio:hover { opacity: 1; color: #9C332B; }

@media (max-width: 860px) {
  .lato-note { width: 260px; }
  .testa-nota { padding: 8px 10px; }
  .editor.grande { padding: 12px 12px; }
}

/* ==========================================================================
   NAVIGAZIONE NELLA BARRA LATERALE
   Note sopra, Calendario sotto.
   ========================================================================== */

.navigazione-lato {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px;
  border-bottom: 1px solid var(--linea);
}

.voce-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--raggio);
  color: var(--testo);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.voce-nav:hover { background: var(--accento-tenue); }
.voce-nav.attiva {
  background: var(--accento);
  color: #fff;
  font-weight: 600;
}
.voce-nav .segno { opacity: .7; font-size: 12px; }
.voce-nav.attiva .segno { opacity: 1; }

.lato-note .navigazione-lato { padding: 8px; }

/* Titolo della nota, ora formattabile */
.titolo-nota {
  flex: 1;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.titolo-nota:hover { border-color: var(--linea); }
.titolo-nota:focus {
  outline: none;
  border-color: var(--accento);
  background: var(--carta);
  white-space: normal;
}
/* Il segnaposto sparisce appena il campo prende il fuoco, e non
   intercetta il puntatore. Senza queste due precauzioni lo pseudo-elemento
   si mangia il primo clic: bisogna cliccare due volte perche' il campo
   diventi scrivibile. */
.titolo-nota:empty:not(:focus)::before {
  content: attr(data-vuoto);
  color: var(--tenue);
  font-weight: 400;
  pointer-events: none;
}

/* Un contenteditable vuoto e alto poco e' difficile da centrare col
   puntatore: gli si da' una riga di altezza garantita. */
.titolo-nota:empty { min-height: 22px; }

.postit-apri {
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: #FFF8E1;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.postit-apri:hover { background: #FFE082; border-color: #E0C168; }

/* ==========================================================================
   POST-IT — finestra a se' stante
   ========================================================================== */

.corpo-postit {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #FFF8E1;
}

.postit {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.postit-barra {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 11px;
  background: #FFE082;
  border-bottom: 1px solid rgba(0, 0, 0, .14);
  flex: none;
  /* Nel browser la barra non trascina la finestra: quella si sposta dalla
     cornice del sistema. Qui serve solo come intestazione. */
}
.postit-barra.barra-scura { color: #fff; }

.postit-titolo {
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  border: 1px solid transparent;
  border-radius: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.postit-titolo:hover { border-color: rgba(0, 0, 0, .18); }
.postit-titolo:focus {
  outline: none;
  border-color: rgba(0, 0, 0, .4);
  background: rgba(255, 255, 255, .55);
  white-space: normal;
}

.postit-bottone {
  width: 24px; height: 24px;
  border: 0;
  border-radius: 2px;
  background: none;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  flex: none;
}
.postit-bottone:hover { background: rgba(0, 0, 0, .12); }

.postit-strumenti {
  flex: none;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.postit-strumenti[hidden] { display: none; }
.postit-strumenti .fmt-barra {
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .45);
}

.postit-colori {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 8px;
  background: rgba(255, 255, 255, .35);
}
.etichetta-colori {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(0, 0, 0, .55);
}
.tinte { display: flex; gap: 3px; }
.tinta {
  width: 18px; height: 18px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .28);
  border-radius: 2px;
  cursor: pointer;
}
.tinta:hover { outline: 2px solid rgba(0, 0, 0, .45); outline-offset: 1px; }

.postit-testo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: #FFF8E1;
  font-size: 13px;
  line-height: 1.5;
}
.postit-testo:focus { outline: none; }
.postit-testo ul, .postit-testo ol { padding-left: 22px; margin: 4px 0; }

.postit-piede {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 10.5px;
  color: rgba(0, 0, 0, .5);
  border-top: 1px solid rgba(0, 0, 0, .10);
  background: rgba(255, 255, 255, .35);
}

.postit-fogli { margin-left: auto; display: flex; gap: 3px; }
.postit-foglio {
  padding: 2px 8px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 2px;
  background: rgba(255, 255, 255, .5);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
}
.postit-foglio.attivo { background: rgba(255, 255, 255, .95); font-weight: 700; }

/* ==========================================================================
   PAGINE DI AMMINISTRAZIONE
   ========================================================================== */

.pagina-admin {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 40px;
  max-width: 860px;
}

.pagina-admin section { margin-bottom: 28px; }
.pagina-admin h2 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tenue);
}
.pagina-admin .nota { text-align: left; margin: 8px 0; }
.pagina-admin .spiega { max-width: 520px; }

.primario.in-riga {
  display: inline-block;
  width: auto;
  padding: 0 16px;
  line-height: 34px;
  text-decoration: none;
  text-align: center;
}

.scheda-account {
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--carta);
  border: 1px solid var(--linea-forte);
  border-left: 4px solid #2E7D32;
  border-radius: var(--raggio);
}
.scheda-account.scollegato { border-left-color: #C0392B; }

.riga-account {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.riga-account .upn { color: var(--tenue); font-size: 12.5px; }

.pastiglia-stato {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
}
.pastiglia-stato.viva { background: #E3F1D8; color: #2E7D32; }
.pastiglia-stato.spenta { background: #FBEBEA; color: #9C332B; }

.riga-abbina {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.riga-abbina select {
  padding: 5px 8px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  font: inherit;
  background: var(--carta);
}

.tabella-log {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  background: var(--carta);
  border: 1px solid var(--linea-forte);
}
.tabella-log th {
  text-align: left;
  padding: 6px 9px;
  background: var(--sfondo);
  border-bottom: 1px solid var(--linea-forte);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tenue);
}
.tabella-log td {
  padding: 5px 9px;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.tabella-log tr.esito-errore td { background: #FBEBEA; }
.tabella-log tr.esito-conflitto td { background: #FDF3D8; }

/* Avviso di sola lettura: dev'essere la prima cosa che si vede */
.avviso.solo-lettura {
  background: #E3F1D8;
  border-color: #7FAE5E;
  margin-bottom: 18px;
}
.avviso code {
  background: rgba(0, 0, 0, .07);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 11.5px;
}

.in-attesa {
  margin-top: 9px;
  padding: 7px 9px;
  background: #FDF3D8;
  border: 1px solid #E3C56A;
  border-radius: var(--raggio);
  font-size: 12px;
}
.in-attesa summary { cursor: pointer; font-weight: 600; }
.in-attesa ul { margin: 6px 0 0; padding-left: 18px; }
.in-attesa li { margin: 2px 0; }

/* Proposta di riapertura dei post-it lasciati aperti */
.riapri-postit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: #FFF8E1;
  border-bottom: 1px solid #E0C168;
  font-size: 12.5px;
}
.riapri-postit button {
  height: 26px;
  padding: 0 12px;
  border: 1px solid #E0C168;
  border-radius: var(--raggio);
  background: #FFE082;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.riapri-postit button:hover { filter: brightness(1.05); }
.riapri-postit button.scarta {
  background: var(--carta);
  border-color: var(--linea-forte);
  margin-left: auto;
}

.indirizzo-lungo {
  width: 100%;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  resize: vertical;
  background: var(--sfondo);
}

/* Abbinamento dei calendari con Outlook */
.riga-outlook { margin-bottom: 7px; }
.riga-outlook .nome-abbina {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 150px;
  font-weight: 600;
}
.riga-outlook input[type="text"] {
  flex: 1;
  min-width: 240px;
  padding: 5px 8px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  font: inherit;
  font-size: 12.5px;
}

/* ==========================================================================
   DESCRIZIONE DENTRO IL BLOCCO
   In EssentialPIM il testo lungo sta nella descrizione e viene mostrato
   dentro il blocco sotto il titolo. Qui si fa lo stesso: senza, il
   contenuto di oltre mille impegni resterebbe salvato ma invisibile.
   ========================================================================== */

.blocco .descrizione {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, .10);
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}
.blocco .descrizione ul,
.blocco .descrizione ol { margin: 3px 0; padding-left: 18px; }
.blocco .descrizione li { margin: 1px 0; }
.blocco .descrizione p { margin: 3px 0; }
.blocco .descrizione a { color: var(--accento); }
.blocco.fatto .descrizione { opacity: .62; }

/* Nella fascia oraria lo spazio e' quello della durata: li' la
   descrizione si taglia invece di sfondare il blocco. */
.blocco-orario .descrizione {
  margin-top: 3px;
  padding-top: 3px;
  font-size: 11px;
  max-height: 3em;
  overflow: hidden;
}

.descrizione-editor { min-height: 90px; }

/* ==========================================================================
   APRI PER INTERO

   Ogni blocco ha un pulsante che lo apre a piena pagina, dove si legge
   tutto: titolo e descrizione per intero, con la formattazione.
   ========================================================================== */

/* C'e' su ogni blocco, sempre. */
.blocco .espandi {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--linea-forte);
  border-radius: 3px;
  background: var(--carta);
  color: var(--accento);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.blocco .espandi:hover { background: var(--accento); color: #fff; }

/* --- Il blocco espanso ---

   E' lo stesso impegno, appoggiato sopra la griglia nel punto esatto in
   cui si trova, largo quanto la sua colonna. Scavalca la fascia oraria e
   arriva fino alla fine del testo.

   Sta fuori dal contenitore che scorre perche' altrimenti non potrebbe
   uscirne: un elemento dentro una zona con lo scorrimento resta dentro. */
.blocco-espanso {
  /* posizione e livello li scrive il codice, per non dipendere da qui */
  margin: 0;
  box-shadow: 0 8px 30px rgba(12, 20, 34, .35);
  border: 2px solid var(--accento);
  border-left-width: 5px;
  cursor: default;
}

/* L'originale resta al suo posto, ma sbiadito: si capisce che quello
   sopra e' lo stesso impegno e non un secondo. */
.blocco.in-espansione { opacity: .35; }

/* Espanso, il pulsante diventa la chiusura. */
.blocco-espanso .espandi {
  position: sticky;
  float: right;
  top: 2px;
  right: 0;
  margin-left: 6px;
  background: var(--accento);
  color: #fff;
  border-color: var(--accento);
}

/* --- Accesso con l'impronta, nella pagina di accesso --- */

.bio {
  width: 100%;
  height: 42px;
  margin-bottom: 4px;
  border: 1px solid var(--accento);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--accento);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bio:hover { background: var(--accento-tenue); }
.bio:disabled { opacity: .6; cursor: default; }
.bio .segno { font-size: 17px; }
.bio[hidden] { display: none; }

.separatore {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--tenue);
  font-size: 11.5px;
}
.separatore::before, .separatore::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}
.separatore[hidden] { display: none; }

/* Su schermo piccolo la scheda di accesso occupa quasi tutto */
@media (max-width: 520px) {
  .scheda-accesso { width: 100%; padding: 22px 18px 20px; }
  .scheda-accesso .campo input { font-size: 16px; }
  .codice { font-size: 24px; }
}

/* Nota sotto i campi data della scheda: dice cosa conta in quella zona,
   invece di sbiadire i campi facendoli sembrare spenti. */
.nota-orari {
  margin: -6px 0 11px;
  font-size: 11.5px;
  color: var(--tenue);
}