/* =======================================================================
   Stili grafici scelti dall'operatore (menu "Aspetto" in alto a destra)
   <html data-stile="rilievo|smalto|sale|lucido|fumetto">  — assente = Classico
   <html data-card="chiare">                                — card agenda bianche col bordo colore
   Cambiano solo colori, ombre, angoli e caratteri: mai la struttura.
   Agenda e tabelle restano opache (niente backdrop-filter: costa GPU su centinaia di card).
   Le card dell'agenda hanno lo sfondo inline (colore operatore): per cambiarlo serve !important.
   ======================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ---------- Correzioni valide per tutti gli stili ---------- */
:root { --bg-card: var(--white); }

/* contorno visibile con il tasto Tab dove mancava */
.shell-nav-item:focus-visible, .tab:focus-visible, .appt-menu button:focus-visible,
.hs-btn:focus-visible, .tema-menu-item:focus-visible, .aspetto-chip:focus-visible,
.wa-conv:focus-visible, .wa-chat-doc:focus-visible {
  outline: 2px solid var(--blue-500); outline-offset: 2px;
}

/* WhatsApp nel tema scuro: prima testo chiaro su fondo chiaro */
html[data-theme="dark"] .wa-chat-messages { background: #0B141A; background-image: none; }
html[data-theme="dark"] .wa-chat-bubble.out { background: #005C4B; color: #E9EDEF; }
html[data-theme="dark"] .wa-chat-bubble.in { background: #202C33; color: #E9EDEF; }
html[data-theme="dark"] .wa-chat-text { color: inherit; }
html[data-theme="dark"] .wa-chat-time { color: rgba(233, 237, 239, 0.65); }
html[data-theme="dark"] .wa-chat-daysep span { background: #182229; color: #8696A0; }
html[data-theme="dark"] .wa-chat-doc { background: rgba(255, 255, 255, 0.08); color: #E9EDEF; }
html[data-theme="dark"] .wa-chat-doc:hover { background: rgba(255, 255, 255, 0.14); }
html[data-theme="dark"] .wa-chat-doc-tipo { color: #8696A0; }
html[data-theme="dark"] .wa-web-empty { background: #0B141A; background-image: none; color: #8696A0; }

/* Menu Aspetto */
.aspetto-menu { min-width: 250px; max-height: calc(100vh - 70px); overflow-y: auto; }
.tema-menu-sez { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; color: var(--fg-muted); }
.tema-menu-desc { display: block; font-size: 11px; font-weight: 400; color: var(--fg-muted); margin-top: 1px; }
.aspetto-riga { display: flex; gap: 4px; padding: 2px 6px 6px; }
.aspetto-chip {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border-default);
  background: var(--white); color: var(--fg-default); font: inherit; font-size: 12px; cursor: pointer;
}
.aspetto-chip:hover { background: var(--bg-secondary); }
.aspetto-chip.active { background: var(--blue-50); border-color: var(--blue-500); color: var(--blue-700); font-weight: 600; }

/* ---------- Card dell'agenda "chiare" (qualsiasi stile) ---------- */
html[data-card="chiare"] .appt-pos.appt-solid {
  background: var(--white) !important;
  color: var(--fg-strong) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--op, #888) 30%, transparent), 0 1px 2px rgba(20, 24, 30, 0.08);
}
html[data-card="chiare"][data-theme="dark"] .appt-pos.appt-solid {
  background: color-mix(in srgb, var(--op, #888) 16%, var(--white)) !important;
}
html[data-card="chiare"] .appt-pos.appt-solid.selected {
  box-shadow: 0 0 0 2px var(--op, var(--blue-500)), 0 6px 16px rgba(20, 24, 30, 0.18);
}

/* =======================================================================
   RILIEVO — stessa identità, tre livelli di profondità
   ======================================================================= */
html[data-stile="rilievo"] {
  --bg-app: #EEF2F6;
  --rl-1: 0 1px 2px rgba(18, 50, 77, 0.06), 0 1px 1px rgba(18, 50, 77, 0.04);
  --rl-2: 0 1px 2px rgba(18, 50, 77, 0.06), 0 8px 24px rgba(18, 50, 77, 0.08);
  --rl-3: 0 0 0 1px rgba(18, 50, 77, 0.06), 0 4px 8px rgba(18, 50, 77, 0.08), 0 20px 44px rgba(18, 50, 77, 0.22);
  --rl-side: #12324D;
}
html[data-stile="rilievo"][data-theme="dark"] {
  --bg-app: #0E1217;
  --rl-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --rl-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --rl-3: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 44px rgba(0, 0, 0, 0.55);
  --rl-side: #0B1724;
}
html[data-stile="rilievo"] .shell-sidebar { background: var(--rl-side); border-right: 0; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06); }
html[data-stile="rilievo"] .shell-sidebar:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); }
html[data-stile="rilievo"] .shell-logo { border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-stile="rilievo"] .shell-brand-name, html[data-stile="rilievo"] .shell-user-name { color: #FFFFFF; }
html[data-stile="rilievo"] .shell-brand-tag, html[data-stile="rilievo"] .shell-user-role { color: #9DB6CB; }
html[data-stile="rilievo"] .shell-nav-item { color: #DCE7F0; }
html[data-stile="rilievo"] .shell-nav-item:hover { background: rgba(255, 255, 255, 0.08); }
html[data-stile="rilievo"] .shell-nav-item.active {
  background: rgba(255, 255, 255, 0.13); color: #FFFFFF;
  box-shadow: inset 3px 0 0 #6FB6E8, inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-stile="rilievo"] .shell-side-footer { border-top-color: rgba(255, 255, 255, 0.08); }
html[data-stile="rilievo"] .shell-user { background: rgba(0, 0, 0, 0.2); }
html[data-stile="rilievo"] .shell-user .btn-icon { color: #DCE7F0; }
html[data-stile="rilievo"] .shell-topbar { border-bottom: 0; box-shadow: 0 1px 0 rgba(18, 50, 77, 0.06), 0 2px 8px rgba(18, 50, 77, 0.06); position: relative; z-index: 2; }
html[data-stile="rilievo"] .paziente-card,
html[data-stile="rilievo"] .agenda-grid-wrap,
html[data-stile="rilievo"] .pazienti-table,
html[data-stile="rilievo"] .card { border-color: transparent; box-shadow: var(--rl-2); border-radius: 12px; }
html[data-stile="rilievo"] .modal-card,
html[data-stile="rilievo"] .hover-scheda,
html[data-stile="rilievo"] .appt-menu,
html[data-stile="rilievo"] .tema-menu { border-color: transparent; box-shadow: var(--rl-3); border-radius: 14px; }
html[data-stile="rilievo"] .btn-primary { box-shadow: 0 1px 0 #103453, 0 3px 8px rgba(31, 95, 139, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
html[data-stile="rilievo"] .btn-secondary { border-color: transparent; box-shadow: 0 0 0 1px rgba(18, 50, 77, 0.10), 0 1px 2px rgba(18, 50, 77, 0.10); }
html[data-stile="rilievo"] .input { box-shadow: inset 0 1px 2px rgba(18, 50, 77, 0.08); }
html[data-stile="rilievo"]:not([data-card="chiare"]) .appt-pos.appt-solid {
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 1px rgba(0, 0, 0, 0.12);
}
html[data-stile="rilievo"] .toast { box-shadow: var(--rl-3); border-radius: 12px; }

/* =======================================================================
   SMALTO — superfici perlate, riflesso in alto, angoli morbidi, menta
   ======================================================================= */
html[data-stile="smalto"] {
  --font-sans: "Figtree", "Roboto", system-ui, sans-serif;
  --bg-app: #E9EFF1;
  --sm-sup: linear-gradient(180deg, #FFFFFF 0%, #F8FBFB 100%);
  --sm-luce: inset 0 1px 0 #FFFFFF;
  --sm-bordo: 0 0 0 1px rgba(23, 38, 47, 0.06);
  --sm-ombra: 0 8px 22px rgba(23, 38, 47, 0.09);
}
html[data-stile="smalto"][data-theme="dark"] {
  --bg-app: #10151A;
  --sm-sup: linear-gradient(180deg, #1F262E 0%, #1A2027 100%);
  --sm-luce: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --sm-bordo: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --sm-ombra: 0 8px 22px rgba(0, 0, 0, 0.4);
}
html[data-stile="smalto"] body { font-family: var(--font-sans); }
html[data-stile="smalto"] .shell-sidebar {
  top: 10px; bottom: 10px; left: 10px; border-radius: 18px; border: 0;
  background: var(--sm-sup); box-shadow: var(--sm-luce), var(--sm-bordo), var(--sm-ombra);
}
html[data-stile="smalto"] .shell-main { margin-left: 84px; }
html[data-stile="smalto"] .shell-logo, html[data-stile="smalto"] .shell-side-footer { border-color: transparent; }
html[data-stile="smalto"] .shell-brand-name { font-family: var(--font-sans); font-weight: 700; }
html[data-stile="smalto"] .shell-nav-item { border-radius: 12px; }
html[data-stile="smalto"] .shell-nav-item.active {
  background: linear-gradient(180deg, var(--mint-50) 0%, var(--mint-100) 100%); color: var(--mint-700);
  box-shadow: var(--sm-luce), 0 0 0 1px color-mix(in srgb, var(--mint-600) 20%, transparent);
}
html[data-stile="smalto"] .shell-user { border-radius: 14px; box-shadow: inset 0 1px 2px rgba(23, 38, 47, 0.08); }
html[data-stile="smalto"] .shell-topbar { background: transparent; border-bottom: 0; }
html[data-stile="smalto"] .paziente-card,
html[data-stile="smalto"] .agenda-grid-wrap,
html[data-stile="smalto"] .pazienti-table,
html[data-stile="smalto"] .card {
  background: var(--sm-sup); border-color: transparent; border-radius: 18px;
  box-shadow: var(--sm-luce), var(--sm-bordo), var(--sm-ombra);
}
html[data-stile="smalto"] .modal-card,
html[data-stile="smalto"] .hover-scheda,
html[data-stile="smalto"] .appt-menu,
html[data-stile="smalto"] .tema-menu {
  background: var(--sm-sup); border-color: transparent; border-radius: 18px;
  box-shadow: var(--sm-luce), var(--sm-bordo), 0 24px 48px rgba(23, 38, 47, 0.22), 0 4px 10px rgba(23, 38, 47, 0.08);
}
html[data-stile="smalto"] .btn { border-radius: 11px; }
html[data-stile="smalto"] .btn-sm { border-radius: 9px; }
html[data-stile="smalto"] .btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue-500) 85%, #FFFFFF) 0%, var(--blue-500) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 0 var(--blue-700), 0 5px 12px rgba(31, 95, 139, 0.28);
}
html[data-stile="smalto"] .btn-secondary {
  background: var(--sm-sup); border-color: transparent;
  box-shadow: var(--sm-luce), 0 0 0 1px rgba(23, 38, 47, 0.10), 0 1px 2px rgba(23, 38, 47, 0.08);
}
html[data-stile="smalto"] .input { border-radius: 11px; box-shadow: inset 0 1px 3px rgba(23, 38, 47, 0.12); }
html[data-stile="smalto"]:not([data-card="chiare"]) .appt-pos.appt-solid {
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.15);
}
html[data-stile="smalto"] .toast { border-radius: 14px; box-shadow: var(--sm-luce), var(--sm-bordo), 0 14px 30px rgba(23, 38, 47, 0.18); }

/* =======================================================================
   SALE — colonne col colore della sala, carattere Lexend
   ======================================================================= */
html[data-stile="sale"] {
  --font-sans: "Lexend", "Roboto", system-ui, sans-serif;
  --bg-app: #F4F6F8;
}
html[data-stile="sale"][data-theme="dark"] { --bg-app: #10141A; }
html[data-stile="sale"] body { font-family: var(--font-sans); }
html[data-stile="sale"] .shell-brand-name { font-family: var(--font-sans); }
html[data-stile="sale"] .shell-nav-item { border-radius: 10px; }
/* colonne col colore dello studio: sempre (tenue) nello stile Sale, a scelta nel menu Aspetto
   per tutti gli stili: data-sfondo="tenue" velatura leggera, "pieno" colore deciso */
html[data-stile="sale"] .agenda-sala-col,
html[data-stile="sale"] .week-sala-col,
html[data-sfondo="tenue"] .week-sala-col,
html[data-sfondo="tenue"] .agenda-sala-col { background: color-mix(in srgb, var(--sala, transparent) 10%, var(--white)); }
html[data-sfondo="tenue"] .week-sala-head,
html[data-sfondo="tenue"] .agenda-sala-head {
  background: color-mix(in srgb, var(--sala, transparent) 22%, var(--white));
  box-shadow: inset 0 -3px 0 var(--sala, transparent);
}
html[data-sfondo="pieno"] { --sala-pct: 32%; }
html[data-sfondo="pieno"] .week-sala-col,
html[data-sfondo="pieno"] .agenda-sala-col { background: color-mix(in srgb, var(--sala, transparent) 32%, var(--white)) !important; }
html[data-sfondo="pieno"][data-theme="dark"] .week-sala-col,
html[data-sfondo="pieno"][data-theme="dark"] .agenda-sala-col { background: color-mix(in srgb, var(--sala, transparent) 24%, var(--white)) !important; }
html[data-sfondo="pieno"] .week-sala-head,
html[data-sfondo="pieno"] .agenda-sala-head { background: var(--sala, transparent) !important; box-shadow: none; }
html[data-sfondo="pieno"] .week-sala-head .week-sala-name { color: #1F1F1F !important; font-weight: 600; }
html[data-sfondo="pieno"] .agenda-sala-head .agenda-sala-name { background: rgba(255, 255, 255, 0.85) !important; color: #1F1F1F !important; }
html[data-stile="sale"] .week-sala-head,
html[data-stile="sale"] .agenda-sala-head {
  background: color-mix(in srgb, var(--sala, transparent) 20%, var(--white));
  box-shadow: inset 0 -3px 0 var(--sala, transparent);
}
html[data-stile="sale"] .agenda-grid-wrap,
html[data-stile="sale"] .paziente-card,
html[data-stile="sale"] .pazienti-table,
html[data-stile="sale"] .card { border-radius: 14px; box-shadow: 0 0 0 1px var(--border-default), 0 4px 14px rgba(23, 36, 51, 0.06); border-color: transparent; }
html[data-stile="sale"] .btn-primary { box-shadow: 0 2px 0 var(--blue-700); }
html[data-stile="sale"] .btn { border-radius: 10px; }
html[data-stile="sale"] .btn-sm { border-radius: 8px; }
html[data-stile="sale"] .modal-card,
html[data-stile="sale"] .hover-scheda,
html[data-stile="sale"] .tema-menu { border-radius: 16px; box-shadow: 0 0 0 1px var(--border-default), 0 20px 44px rgba(23, 36, 51, 0.20); }
html[data-stile="sale"]:not([data-card="chiare"]) .appt-pos.appt-solid {
  border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.10);
}

/* =======================================================================
   LUCIDO — riflessi brillanti, vetro sfocato SOLO su finestre e menu
   ======================================================================= */
html[data-stile="lucido"] {
  --bg-app: #E7EEF6;
  --lc-vetro: rgba(255, 255, 255, 0.72);
  --lc-filo: rgba(255, 255, 255, 0.7);
  --lc-riflesso: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 100%);
}
html[data-stile="lucido"][data-theme="dark"] {
  --bg-app: #0D1218;
  --lc-vetro: rgba(27, 32, 39, 0.74);
  --lc-filo: rgba(255, 255, 255, 0.08);
  --lc-riflesso: linear-gradient(180deg, rgba(40, 47, 57, 0.95) 0%, rgba(27, 32, 39, 0.95) 100%);
}
html[data-stile="lucido"] .shell { background: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--blue-500) 14%, transparent), transparent 60%), var(--bg-app); }
html[data-stile="lucido"] .shell-sidebar,
html[data-stile="lucido"] .modal-card,
html[data-stile="lucido"] .hover-scheda,
html[data-stile="lucido"] .appt-menu,
html[data-stile="lucido"] .tema-menu,
html[data-stile="lucido"] .toast {
  background: var(--lc-vetro);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-color: var(--lc-filo);
}
html[data-stile="lucido"] .shell-sidebar { border-right: 1px solid var(--lc-filo); }
html[data-stile="lucido"] .modal-card,
html[data-stile="lucido"] .hover-scheda,
html[data-stile="lucido"] .tema-menu { border-radius: 16px; box-shadow: inset 0 1px 0 var(--lc-filo), 0 24px 50px rgba(15, 30, 50, 0.25); }
html[data-stile="lucido"] .shell-topbar { background: transparent; border-bottom: 0; }
html[data-stile="lucido"] .paziente-card,
html[data-stile="lucido"] .agenda-grid-wrap,
html[data-stile="lucido"] .pazienti-table,
html[data-stile="lucido"] .card {
  background: var(--lc-riflesso); border-color: var(--lc-filo); border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--lc-filo), 0 10px 30px rgba(15, 30, 50, 0.10);
}
html[data-stile="lucido"] .shell-nav-item.active {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-500) 25%, transparent);
}
html[data-stile="lucido"] .btn { border-radius: 12px; }
html[data-stile="lucido"] .btn-sm { border-radius: 10px; }
html[data-stile="lucido"] .btn-primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.06) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 16px color-mix(in srgb, var(--blue-500) 35%, transparent);
}
html[data-stile="lucido"] .btn-secondary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55));
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 3px rgba(15, 30, 50, 0.12);
}
html[data-stile="lucido"][data-theme="dark"] .btn-secondary { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
html[data-stile="lucido"]:not([data-card="chiare"]) .appt-pos.appt-solid {
  border-radius: 7px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.06) 48%, rgba(0, 0, 0, 0.05) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.18);
}
/* chi ha disattivato le trasparenze nel sistema: superfici piene */
@media (prefers-reduced-transparency: reduce) {
  html[data-stile="lucido"] .shell-sidebar, html[data-stile="lucido"] .modal-card, html[data-stile="lucido"] .hover-scheda,
  html[data-stile="lucido"] .appt-menu, html[data-stile="lucido"] .tema-menu, html[data-stile="lucido"] .toast {
    background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* =======================================================================
   FUMETTO — bordi neri spessi, ombre piene sfalsate, colori pieni (stile MotherDuck)
   ======================================================================= */
html[data-stile="fumetto"] {
  --font-sans: "Space Grotesk", "Roboto", system-ui, sans-serif;
  --bg-app: #F4EFEA;
  --fu-ink: #1F1F1F;
  --fu-carta: #F4EFEA;
  --fu-sup: #FFFFFF;
  --fu-giallo: #FFDE00;
  --fu-azzurro: #6FC2FF;
}
html[data-stile="fumetto"][data-theme="dark"] {
  --bg-app: #191714;
  --fu-ink: #F4EFEA;
  --fu-carta: #191714;
  --fu-sup: #24211D;
}
html[data-stile="fumetto"] body { font-family: var(--font-sans); }
html[data-stile="fumetto"] .shell-brand-name { font-family: var(--font-sans); font-weight: 700; }
html[data-stile="fumetto"] .shell-sidebar { background: var(--fu-giallo); border-right: 2px solid #1F1F1F; }
html[data-stile="fumetto"] .shell-sidebar:hover { box-shadow: 4px 0 0 #1F1F1F; }
html[data-stile="fumetto"] .shell-sidebar,
html[data-stile="fumetto"] .shell-sidebar .shell-nav-item,
html[data-stile="fumetto"] .shell-sidebar .shell-brand-name,
html[data-stile="fumetto"] .shell-sidebar .shell-user-name { color: #1F1F1F; }
html[data-stile="fumetto"] .shell-sidebar .shell-brand-tag,
html[data-stile="fumetto"] .shell-sidebar .shell-user-role { color: #4A4300; }
html[data-stile="fumetto"] .shell-logo, html[data-stile="fumetto"] .shell-side-footer { border-color: #1F1F1F; border-width: 2px; }
html[data-stile="fumetto"] .shell-nav-item { border-radius: 8px; border: 2px solid transparent; }
html[data-stile="fumetto"] .shell-nav-item:hover { background: rgba(255, 255, 255, 0.45); }
html[data-stile="fumetto"] .shell-nav-item.active { background: #FFFFFF; color: #1F1F1F; border-color: #1F1F1F; box-shadow: 2px 2px 0 #1F1F1F; }
html[data-stile="fumetto"] .shell-user { background: #FFFFFF; border: 2px solid #1F1F1F; color: #1F1F1F; }
html[data-stile="fumetto"] .shell-topbar { background: var(--fu-carta); border-bottom: 2px solid var(--fu-ink); }
html[data-stile="fumetto"] .paziente-card,
html[data-stile="fumetto"] .agenda-grid-wrap,
html[data-stile="fumetto"] .pazienti-table,
html[data-stile="fumetto"] .card {
  background: var(--fu-sup); border: 2px solid var(--fu-ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--fu-ink);
}
html[data-stile="fumetto"] .modal-card,
html[data-stile="fumetto"] .hover-scheda,
html[data-stile="fumetto"] .appt-menu,
html[data-stile="fumetto"] .tema-menu {
  background: var(--fu-sup); border: 2px solid var(--fu-ink); border-radius: 12px; box-shadow: 6px 6px 0 var(--fu-ink);
}
html[data-stile="fumetto"] .btn {
  border: 2px solid var(--fu-ink); border-radius: 8px; font-weight: 600;
  transition: transform 80ms, box-shadow 80ms, background-color 80ms;
}
html[data-stile="fumetto"] .btn:not(.btn-icon):not(.btn-ghost) { box-shadow: 3px 3px 0 var(--fu-ink); }
html[data-stile="fumetto"] .btn:not(.btn-icon):not(.btn-ghost):hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--fu-ink); }
html[data-stile="fumetto"] .btn:not(.btn-icon):not(.btn-ghost):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--fu-ink); }
html[data-stile="fumetto"] .btn-primary,
html[data-stile="fumetto"] .btn-primary:hover { background: var(--fu-azzurro); color: #1F1F1F; }
html[data-stile="fumetto"] .btn-secondary,
html[data-stile="fumetto"] .btn-secondary:hover { background: var(--fu-sup); color: var(--fu-ink); }
html[data-stile="fumetto"] .btn-icon { border-color: transparent; }
html[data-stile="fumetto"] .input { border: 2px solid var(--fu-ink); border-radius: 8px; }
html[data-stile="fumetto"]:not([data-card="chiare"]) .appt-pos.appt-solid {
  border-radius: 6px; box-shadow: inset 0 0 0 1.5px #1F1F1F, 1px 1px 0 #1F1F1F;
}
html[data-stile="fumetto"][data-card="chiare"] .appt-pos.appt-solid { box-shadow: inset 0 0 0 1.5px var(--fu-ink), 1px 1px 0 var(--fu-ink); }
html[data-stile="fumetto"] .toast { background: var(--fu-giallo); color: #1F1F1F; border: 2px solid #1F1F1F; border-radius: 10px; box-shadow: 4px 4px 0 #1F1F1F; }
html[data-stile="fumetto"] .tab.active { box-shadow: inset 0 -3px 0 var(--fu-ink); }
/* Fumetto al buio: il giallo pieno su tutta la barra laterale abbaglia (07/11/2026).
   Barra scura e calda, giallo smorzato solo come accento (voce attiva, filo, avvisi). */
html[data-stile="fumetto"][data-theme="dark"] { --fu-giallo: #D4B82A; --fu-azzurro: #4E9FD9; }
html[data-stile="fumetto"][data-theme="dark"] .shell-sidebar { background: #24211B; border-right: 2px solid #8C7A22; }
html[data-stile="fumetto"][data-theme="dark"] .shell-sidebar:hover { box-shadow: 4px 0 0 #000; }
html[data-stile="fumetto"][data-theme="dark"] .shell-sidebar,
html[data-stile="fumetto"][data-theme="dark"] .shell-sidebar .shell-nav-item,
html[data-stile="fumetto"][data-theme="dark"] .shell-sidebar .shell-brand-name,
html[data-stile="fumetto"][data-theme="dark"] .shell-sidebar .shell-user-name { color: #EDE6D6; }
html[data-stile="fumetto"][data-theme="dark"] .shell-sidebar .shell-brand-tag,
html[data-stile="fumetto"][data-theme="dark"] .shell-sidebar .shell-user-role { color: #B5A97E; }
html[data-stile="fumetto"][data-theme="dark"] .shell-logo,
html[data-stile="fumetto"][data-theme="dark"] .shell-side-footer { border-color: #4A4330; }
html[data-stile="fumetto"][data-theme="dark"] .shell-nav-item:hover { background: rgba(255, 255, 255, 0.07); }
html[data-stile="fumetto"][data-theme="dark"] .shell-nav-item.active { background: var(--fu-giallo); color: #1F1F1F; border-color: #000; box-shadow: 2px 2px 0 #000; }
html[data-stile="fumetto"][data-theme="dark"] .shell-user { background: #2F2B23; border-color: #4A4330; color: #EDE6D6; }
html[data-stile="fumetto"][data-theme="dark"] .toast { border-color: #000; box-shadow: 4px 4px 0 #000; }

/* =======================================================================
   OGGI in settimana: cornice blu sulle colonne del giorno + testata piena.
   Funziona sopra qualsiasi sfondo degli studi; disattivabile (menu Aspetto → data-oggi="no").
   ======================================================================= */
html:not([data-oggi="no"]) .week-day-head.today { background: var(--blue-500); color: #FFFFFF; box-shadow: inset 2px 0 0 var(--blue-500), inset -2px 0 0 var(--blue-500); }
html:not([data-oggi="no"]) .week-day-head.today .dow,
html:not([data-oggi="no"]) .week-day-head.today .dnum { color: #FFFFFF; }
html:not([data-oggi="no"]) .week-sala-col.today.day-start,
html:not([data-oggi="no"]) .week-sala-head.today.day-start { box-shadow: inset 2px 0 0 var(--blue-500); }
html:not([data-oggi="no"]) .week-sala-col.today.day-end,
html:not([data-oggi="no"]) .week-sala-head.today.day-end { box-shadow: inset -2px 0 0 var(--blue-500); }
html:not([data-oggi="no"]) .week-sala-col.today.day-start.day-end,
html:not([data-oggi="no"]) .week-sala-head.today.day-start.day-end { box-shadow: inset 2px 0 0 var(--blue-500), inset -2px 0 0 var(--blue-500); }
/* con lo sfondo degli studi la velatura azzurra di oggi non serve: c'è la cornice */
html[data-sfondo] .week-sala-col.today { background-color: color-mix(in srgb, var(--sala, transparent) var(--sala-pct, 10%), var(--white)); }
/* disattivato: oggi uguale agli altri giorni */
html[data-oggi="no"] .week-day-head.today { background: transparent; }
html[data-oggi="no"] .week-day-head.today .dnum { color: inherit; }
html[data-oggi="no"]:not([data-sfondo]):not([data-stile="sale"]) .week-sala-col.today,
html[data-oggi="no"]:not([data-sfondo]):not([data-stile="sale"]) .week-sala-head.today { background: transparent; }

/* Fumetto: la colonna è gialla, quindi le piastrelle delle icone sono opache (fondo pieno + contorno nero) */
html[data-stile="fumetto"] .shell-sidebar .shell-nav-item > i:first-child,
html[data-stile="fumetto"] .shell-sidebar .shell-tool .topbar-aspetto > i {
  background: var(--white); border: 2px solid #1F1F1F; color: var(--ic, var(--blue-500));
}
html[data-stile="fumetto"] .shell-sidebar .shell-nav-item:hover > i:first-child,
html[data-stile="fumetto"] .shell-sidebar .shell-tool:hover .topbar-aspetto > i {
  background: color-mix(in srgb, var(--ic, var(--blue-500)) 18%, var(--white));
}
html[data-stile="fumetto"] .shell-sidebar .shell-nav-item.active > i:first-child {
  background: var(--ic, var(--blue-500)); color: #FFFFFF; box-shadow: 2px 2px 0 #1F1F1F;
}
html[data-stile="fumetto"][data-theme="dark"] .shell-sidebar .shell-nav-item > i:first-child,
html[data-stile="fumetto"][data-theme="dark"] .shell-sidebar .shell-tool .topbar-aspetto > i { border-color: #000; }


/* ===== Colore del menu laterale scelto dall'utente (menu Aspetto, tema.js applyMenu) =====
   Vale sopra lo stile grafico. <html data-menu="scuro|chiaro"> + --menu-bg / --menu-fg in linea. */
html[data-menu] .shell-sidebar { background: var(--menu-bg) !important; border-right: 1px solid color-mix(in srgb, var(--menu-fg) 14%, var(--menu-bg)) !important; }
html[data-menu] .shell-sidebar,
html[data-menu] .shell-sidebar .shell-nav-item,
html[data-menu] .shell-sidebar .shell-brand-name,
html[data-menu] .shell-sidebar .shell-user-name { color: var(--menu-fg) !important; }
html[data-menu] .shell-sidebar .shell-brand-tag,
html[data-menu] .shell-sidebar .shell-user-role { color: color-mix(in srgb, var(--menu-fg) 70%, var(--menu-bg)) !important; }
html[data-menu] .shell-sidebar .shell-nav-item:hover { background: color-mix(in srgb, var(--menu-fg) 10%, var(--menu-bg)) !important; }
html[data-menu] .shell-sidebar .shell-nav-item.active { background: color-mix(in srgb, var(--menu-fg) 18%, var(--menu-bg)) !important; color: var(--menu-fg) !important; }
html[data-menu] .shell-sidebar .shell-side-footer { border-top-color: color-mix(in srgb, var(--menu-fg) 14%, var(--menu-bg)) !important; }
/* menu scuro: piastrelle delle icone chiare, perché il colore della voce resti leggibile */
html[data-menu="scuro"] .shell-sidebar .shell-nav-item > i:first-child,
html[data-menu="scuro"] .shell-sidebar .shell-tool .topbar-aspetto > i { background: color-mix(in srgb, var(--ic, var(--blue-500)) 18%, #FFFFFF) !important; }
html[data-menu="scuro"] .shell-sidebar .shell-nav-item:hover > i:first-child { background: #FFFFFF !important; }
html[data-menu="scuro"] .shell-sidebar .shell-nav-item.active > i:first-child { background: var(--ic, var(--blue-500)) !important; color: #FFFFFF !important; box-shadow: 0 0 0 2px #FFFFFF !important; }

/* Tavolozza nel menu Aspetto */
.aspetto-colori { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 8px; max-width: 260px; }
.aspetto-colore { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; position: relative; color: var(--fg-muted); background: var(--bg-card, #fff); }
.aspetto-colore:hover { transform: scale(1.1); }
.aspetto-colore.active { box-shadow: 0 0 0 2px var(--bg-card, #fff), 0 0 0 4px var(--brand-primary, #1F5F8B); }
.aspetto-colore-libero input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.aspetto-colore-libero[style*="background"] i { color: #fff; mix-blend-mode: difference; }