/* ============================================================
   CALENDARIO — veste nuova (16/10)
   Una sola superficie a griglia con linee sottili (niente caselle
   staccate), oggi in evidenza, fine settimana velati, eventi come
   etichette con barretta di colore, linea rossa dell'ora attuale.
   Si carica dopo gli altri fogli; i telefoni restano compatti.
   ============================================================ */

/* ---------- Testata e strumenti ---------- */
/* il periodo mostrato (mese, settimana, giorno) è il titolo vero della pagina;
   «Calendario» diventa un'etichetta piccola sopra (17/10) */
.cal-testata-pagina { align-items: flex-end; }
.cal-testata-pagina h2 {
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-600);
}
.cal-testata-pagina .conteggio {
  display: block;
  min-width: 260px;
  margin-top: 2px;
  padding: 0;
  background: none;
  box-shadow: none;
  font-family: var(--titoli, inherit);
  font-size: 32px; font-weight: 800; line-height: 1.1;
  letter-spacing: -.035em;
  color: var(--n-900);
}
.cal-anno { font-weight: 600; color: var(--n-400); letter-spacing: -.02em; }
@media (max-width: 820px) {
  .cal-testata-pagina .conteggio { font-size: 24px; min-width: 0; }
}

/* cambio di periodo: il titolo riappare e la griglia scorre dal lato giusto */
@keyframes cal-titolo-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cal-entra-avanti { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes cal-entra-indietro { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes cal-entra { from { opacity: 0; } to { opacity: 1; } }
.cal-titolo-entra { animation: cal-titolo-entra .35s var(--ease) both; }
.cal-corpo.cal-entra-avanti { animation: cal-entra-avanti .34s var(--ease) both; }
.cal-corpo.cal-entra-indietro { animation: cal-entra-indietro .34s var(--ease) both; }
.cal-corpo.cal-entra { animation: cal-entra .25s ease both; }
@media (prefers-reduced-motion: reduce) {
  .cal-titolo-entra, .cal-corpo.cal-entra-avanti, .cal-corpo.cal-entra-indietro, .cal-corpo.cal-entra { animation: none; }
}
.cal-testata-pagina .testata-azioni { gap: 8px; }
.cal-testata-pagina .testata-azioni select { height: 38px; max-width: 200px; padding-top: 0; padding-bottom: 0; }
.cal-testata-pagina .seg { margin-bottom: 0; }
.cal-testata-pagina .seg-btn { padding: 7px 14px; }

/* ← Oggi →: un solo blocco */
.cal-nav {
  display: inline-flex;
  border: 1px solid var(--n-200);
  border-radius: 11px;
  background: var(--n-0);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  overflow: hidden;
}
.cal-nav .btn {
  height: 36px;
  border: 0; border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0 12px;
  font-weight: 600;
}
.cal-nav .btn + .btn { border-left: 1px solid var(--n-200); }
.cal-nav .btn:hover { background: var(--n-50); }
.cal-nav [data-oggi] { padding: 0 16px; color: var(--brand-700); }

/* ---------- Legenda ---------- */
.cal-corpo .cal-legenda { gap: 6px; margin-bottom: 14px; }
.cal-corpo .cal-legenda-voce {
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: var(--n-0);
  box-shadow: inset 0 0 0 1px var(--n-200);
  font-size: 12px; font-weight: 500;
  color: var(--n-700);
}
.cal-corpo .cal-legenda-voce .colonna-pallino {
  width: 8px; height: 8px; filter: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.cal-corpo .cal-legenda-voce .ic { width: 13px; height: 13px; color: var(--n-500); }

/* ---------- Vista MESE: una superficie unica ---------- */
.cal-corpo .cal-griglia {
  gap: 0;
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px -18px rgba(16, 24, 40, .18);
}
.cal-corpo .cal-intesta {
  padding: 12px 0 11px;
  background: var(--n-25);
  border-bottom: 1px solid var(--n-200);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em;
  color: var(--n-500);
}
.cal-corpo .cal-cella {
  position: relative;
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--n-100);
  border-bottom: 1px solid var(--n-100);
  box-shadow: none;
  background: var(--n-0);
  padding: 8px 8px 10px;
  gap: 4px;
  transition: background var(--t-veloce);
}
.cal-corpo .cal-cella:nth-child(7n) { border-right: 0; }
.cal-corpo .cal-cella:nth-last-child(-n + 7) { border-bottom: 0; }
/* sabato e domenica appena velati */
.cal-corpo .cal-cella:is(:nth-child(7n), :nth-child(7n - 1)) { background: color-mix(in srgb, var(--n-50) 60%, var(--n-0)); }
.cal-corpo .cal-cella:hover { background: color-mix(in srgb, var(--brand-50) 55%, var(--n-0)); transform: none; box-shadow: none; border-color: var(--n-100); }
/* giorni del mese prima e dopo: righe sottili e numeri spenti */
.cal-corpo .cal-cella.altro-mese {
  opacity: 1;
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--n-200) 35%, transparent) 7px 8px),
    var(--n-25);
}
.cal-corpo .cal-cella.altro-mese .cal-num { color: var(--n-400); }
.cal-corpo .cal-cella.altro-mese .cal-evento { opacity: .6; }

.cal-corpo .cal-num {
  display: grid; place-items: center;
  align-self: flex-start;
  min-width: 26px; height: 26px;
  margin: -3px 0 2px -3px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  color: var(--n-700);
  transition: background var(--t-veloce);
}
.cal-corpo .cal-cella:hover .cal-num { background: var(--n-0); box-shadow: inset 0 0 0 1px var(--n-200); }
/* oggi */
.cal-corpo .cal-cella.oggi {
  border-color: var(--n-100);
  box-shadow: inset 0 3px 0 var(--brand-600);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-50) 90%, var(--n-0)) 0%, var(--n-0) 70%);
}
.cal-corpo .cal-cella.oggi .cal-num,
.cal-corpo .cal-cella.oggi:hover .cal-num {
  width: 28px; min-width: 28px; height: 28px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #0c80aa, #0a6a8f);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 10px -3px rgba(10, 111, 149, .55);
}

/* eventi: etichetta tenue con barretta di colore */
.cal-corpo .cal-evento,
.giorno-fuori .cal-evento, .giorno-task .cal-evento, .sett-extra .cal-evento {
  position: relative;
  padding: 3px 8px 3px 10px;
  border: 0;
  border-radius: 7px;
  font-size: 11.5px; font-weight: 600;
  background: color-mix(in srgb, var(--ev, var(--brand-600)) 10%, var(--n-0));
  box-shadow: none;
  transition: background var(--t-veloce), box-shadow var(--t-veloce);
}
.cal-corpo .cal-evento::before {
  content: '';
  position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--ev, var(--brand-600));
}
.cal-corpo .cal-evento:hover {
  background: color-mix(in srgb, var(--ev, var(--brand-600)) 17%, var(--n-0));
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--ev, var(--brand-600)) 45%, transparent);
}
.cal-corpo .cal-evento .ic { width: 12px; height: 12px; vertical-align: -2px; opacity: .85; }
/* incarichi e chiamate: etichetta «vuota», bordo colorato */
.cal-corpo .cal-evento.cal-task {
  background: var(--n-0);
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev, var(--brand-600)) 32%, var(--n-200));
}
.cal-corpo .cal-evento.cal-task:hover { background: color-mix(in srgb, var(--ev, var(--brand-600)) 7%, var(--n-0)); }
.cal-corpo .cal-evento.completata { opacity: .5; }
.cal-corpo .cal-evento.completata::before { background: var(--n-300); }
.cal-corpo .cal-altri {
  align-self: flex-start;
  margin-top: 1px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50);
}

@media (min-width: 821px) {
  .cal-corpo .cal-cella { min-height: 122px; }
}

/* ---------- Viste GIORNO e SETTIMANA ---------- */
.giorno-grid, .sett-grid {
  border-color: var(--n-200);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px -18px rgba(16, 24, 40, .18);
}
.giorno-fuori, .giorno-task {
  border-color: var(--n-200);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.giorno-task { border-left: 0; box-shadow: inset 3px 0 0 var(--brand-500), 0 1px 2px rgba(16, 24, 40, .04); }
.giorno-linea { border-top-color: var(--n-100); }
.giorno-linea.mezza { border-top-color: color-mix(in srgb, var(--n-100) 60%, transparent); }
.ora-colonna, .sett-ore { border-right-color: var(--n-100); }
.ora-et, .sett-ora { color: var(--n-400); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }

.sett-testa {
  height: 62px;
  background: color-mix(in srgb, var(--n-0) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--n-200);
}
.sett-dow { font-size: 10.5px; letter-spacing: .12em; color: var(--n-500); }
.sett-num {
  width: 34px; height: 34px;
  font-family: var(--titoli, inherit);
  font-size: 17px; font-weight: 700;
  color: var(--n-900);
  transition: background var(--t-veloce);
}
.sett-col.oggi .sett-num {
  background: linear-gradient(180deg, #0c80aa, #0a6a8f);
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(10, 111, 149, .55);
}
.sett-col.oggi .sett-dow { color: var(--brand-700); }
.sett-col { border-right-color: var(--n-100); }
.sett-col:nth-last-child(-n + 2) { background: color-mix(in srgb, var(--n-50) 55%, var(--n-0)); }
.sett-col.oggi { background: color-mix(in srgb, var(--brand-50) 45%, var(--n-0)); }
.sett-extra { border-bottom-color: var(--n-100); }
.sett-fascia, [data-eventi] { cursor: copy; }

/* blocchi degli appuntamenti: tinta tenue con barretta, testo scuro */
.giorno-ev {
  border: 0;
  border-radius: 9px;
  padding: 5px 8px 5px 13px;
  color: color-mix(in srgb, var(--ev, var(--brand-600)) 55%, #101828);
  background: color-mix(in srgb, var(--ev, var(--brand-600)) 13%, var(--n-0));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ev, var(--brand-600)) 18%, transparent);
}
/* barretta dritta (non segue l'angolo arrotondato) */
.giorno-ev::before, .agenda-voce::before {
  content: '';
  position: absolute; left: 3px; top: 4px; bottom: 4px;
  width: 3px; border-radius: 3px;
  background: var(--ev, var(--brand-600));
}
.giorno-ev:hover {
  background: color-mix(in srgb, var(--ev, var(--brand-600)) 19%, var(--n-0));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ev, var(--brand-600)) 28%, transparent), 0 8px 18px -10px rgba(16, 24, 40, .35);
}
.giorno-ev strong { color: color-mix(in srgb, var(--ev, var(--brand-600)) 75%, #101828); }
.giorno-ev .ic { width: 12px; height: 12px; vertical-align: -2px; }
.giorno-ev.completata { opacity: .5; }

/* linea rossa dell'ora attuale */
.ora-adesso {
  position: absolute; left: 0; right: 0;
  height: 2px;
  background: #e5484d;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(229, 72, 77, .45);
}
.ora-adesso::before {
  content: '';
  position: absolute; left: -5px; top: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .2);
}

/* ---------- Vista AGENDA ---------- */
.agenda {
  border-color: var(--n-200);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px -18px rgba(16, 24, 40, .18);
}
.agenda-giorno { padding: 16px 20px; border-bottom-color: var(--n-100); }
.agenda-giorno.oggi { background: linear-gradient(90deg, color-mix(in srgb, var(--brand-50) 90%, var(--n-0)), var(--n-0) 60%); }
.agenda-num { font-family: var(--titoli, inherit); font-size: 22px; font-weight: 800; color: var(--n-900); }
.agenda-giorno.oggi .agenda-num {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(180deg, #0c80aa, #0a6a8f); color: #fff; font-size: 18px;
  box-shadow: 0 4px 10px -3px rgba(10, 111, 149, .55);
}
.agenda-voce {
  position: relative;
  padding-left: 16px;
  border-left: 0;
  border-radius: 10px;
  background: var(--n-0);
  box-shadow: 0 0 0 1px var(--n-100);
  transition: background var(--t-veloce), box-shadow var(--t-veloce);
}
.agenda-voce:hover {
  background: color-mix(in srgb, var(--ev, var(--brand-600)) 7%, var(--n-0));
  box-shadow: 0 0 0 1px var(--n-200), 0 6px 14px -10px rgba(16, 24, 40, .3);
}
.agenda-ora { color: var(--n-900); }

/* ---------- Tema scuro ---------- */
[data-theme="dark"] .cal-testata-pagina .conteggio { background: none; box-shadow: none; color: var(--n-900); }
[data-theme="dark"] .cal-corpo .cal-evento { color: color-mix(in srgb, var(--ev, var(--brand-600)) 60%, #fff); }
[data-theme="dark"] .giorno-ev { color: color-mix(in srgb, var(--ev, var(--brand-600)) 45%, #fff); }
[data-theme="dark"] .giorno-ev strong { color: color-mix(in srgb, var(--ev, var(--brand-600)) 30%, #fff); }
[data-theme="dark"] .cal-corpo .cal-cella.oggi .cal-num,
[data-theme="dark"] .sett-col.oggi .sett-num { background: var(--brand-pieno); }
[data-theme="dark"] .cal-corpo .cal-cella.altro-mese {
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, .025) 7px 8px), var(--n-25);
}
[data-theme="dark"] .agenda-voce { background: var(--n-0); }

/* ---------- Telefoni ---------- */
@media (max-width: 820px) {
  .cal-testata-pagina .testata-azioni select { max-width: none; }
  .cal-corpo .cal-griglia { border-radius: 14px; }
  .cal-corpo .cal-cella { padding: 5px 4px 6px; }
  .cal-corpo .cal-num { min-width: 22px; height: 22px; font-size: 11.5px; padding: 0 4px; margin: -2px 0 1px -1px; }
  .cal-corpo .cal-evento { padding: 2px 4px 2px 7px; font-size: 10.5px; }
  .cal-corpo .cal-intesta { letter-spacing: .06em; padding: 9px 0 8px; }
}

/* «Oggi»: il giorno di oggi lampeggia un attimo (17/10) */
@keyframes cal-lampo {
  0% { box-shadow: inset 0 0 0 2px var(--brand-600), 0 0 0 0 rgba(10, 111, 149, .45); }
  60% { box-shadow: inset 0 0 0 2px var(--brand-600), 0 0 0 10px rgba(10, 111, 149, 0); }
  100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
.cal-corpo .cal-cella.oggi.cal-lampo,
.agenda-giorno.oggi.cal-lampo { animation: cal-lampo 1.5s var(--ease) 1; position: relative; z-index: 1; }
.sett-col.oggi .sett-num.cal-lampo { animation: cal-lampo 1.5s var(--ease) 1; }
@media (prefers-reduced-motion: reduce) {
  .cal-lampo { animation-duration: .01s !important; }
}