/* Tema «classico»: il gestionale come un programma per Windows 2000 (Tommaso, 26/10/2026:
   «basico basico basico, deve sembrare un software degli anni 2000»). Vale solo sotto
   <html class="classico">: le pagine si accendono una per volta. Prima prova: Apollo.
   Regole: grigio di sistema, bordi in rilievo per bottoni e finestre, incassati per campi
   e liste, angoli vivi, niente ombre né trasparenze, Tahoma, mai sotto i 12 px. */

html.classico {
  --ink: #000000;
  --ink-2: #000000;
  --ink-3: #303030;
  --ink-4: #4A4A4A;
  --ink-5: #5A5A5A;
  --ink-inverse: #FFFFFF;
  --canvas: #D4D0C8;
  --surface: #D4D0C8;
  --surface-2: #FFFFFF;
  --surface-3: #C0C0C0;
  --line: #808080;
  --line-2: #808080;
  --blue: #0A246A;
  --blue-ink: #0A246A;
  --blue-soft: #D4D0C8;
  --green: #0A246A;
  --green-ink: #0A246A;
  --green-soft: #FFFFFF;
  --amber-ink: #7A4B00;
  --red: #C00000;
  --red-ink: #C00000;
  --font: Tahoma, Verdana, 'Segoe UI', sans-serif;
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0;
  --sh-xs: none; --sh-sm: none; --sh-md: none; --sh-lg: none;
  /* i quattro bordi del 3D: luce in alto a sinistra */
  --w-alto: #FFFFFF; --w-alto-2: #E0DDD6; --w-basso: #404040; --w-basso-2: #808080;
  --w-titolo: linear-gradient(90deg, #0A246A, #3A6EA5 55%, #A6CAF0);
  -webkit-font-smoothing: auto;
}

html.classico body { font-size: 13px; line-height: 1.4; letter-spacing: 0; background: var(--canvas); }
html.classico *, html.classico *::before, html.classico *::after { transition: none !important; }
/* niente entrate animate: chi parte invisibile e aspetta l'animazione deve vedersi subito */
html.classico .anim-in, html.classico .detail-page, html.classico .toast, html.classico .em-modal,
html.classico .em-modal-scrim, html.classico .mk-src.is-flash { animation: none !important; opacity: 1; transform: none; }
html.classico .hm-kpi:hover { transform: none; }
html.classico :focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* rilievo e incasso, i due gesti di tutto il tema */
html.classico .btn, html.classico .bc-seg button, html.classico .bc-chip,
html.classico .bc-intesta > div, html.classico .bc-giorni-tel button, html.classico .mnav-link:active {
  border: 0; border-radius: 0;
  box-shadow: inset -1px -1px var(--w-basso), inset 1px 1px var(--w-alto), inset -2px -2px var(--w-basso-2), inset 2px 2px var(--w-alto-2);
}
html.classico input, html.classico select, html.classico textarea,
html.classico .bc-settimana, html.classico .bc-lato, html.classico .bc-mese, html.classico .sidebar__scroll {
  border-radius: 0;
  box-shadow: inset 1px 1px var(--w-basso-2), inset -1px -1px var(--w-alto), inset 2px 2px var(--w-basso), inset -2px -2px var(--w-alto-2);
}

/* ---------------------------------------------------------- bottoni */
html.classico .btn, html.classico .btn--secondary, html.classico .btn--ghost, html.classico .btn--dark {
  background: var(--surface); color: #000; font-weight: 400; font-size: 13px; padding: 4px 14px; min-height: 26px;
}
html.classico .btn--sm { padding: 3px 10px; font-size: 13px; }
html.classico .btn--primary { background: var(--surface); color: #000; font-weight: 700; outline: 1px solid #000; outline-offset: -1px; }
html.classico .btn:hover, html.classico .btn--primary:hover, html.classico .btn--secondary:hover { background: var(--surface); filter: none; }
html.classico .btn:active, html.classico .bc-seg button:active, html.classico .bc-chip:active {
  transform: none; box-shadow: inset 1px 1px var(--w-basso), inset -1px -1px var(--w-alto), inset 2px 2px var(--w-basso-2);
  padding-top: 5px; padding-bottom: 2px;
}
html.classico .btn--danger { background: var(--surface); color: #C00000; }

/* ---------------------------------------------------------- finestra: barra laterale e barra del titolo */
html.classico .sidebar { background: var(--surface); padding: 6px; border-right: 1px solid var(--w-basso-2); box-shadow: 1px 0 0 var(--w-alto); }
html.classico .sidebar__brand { padding: 4px 4px 8px; }
html.classico .sidebar__logo { font-size: 14px; font-weight: 700; letter-spacing: 0; }
html.classico .sidebar__logo-mark { width: 22px; height: 22px; }
html.classico .sidebar__logo-mark svg { width: 22px; height: 22px; }
html.classico .sidebar__sub { font-size: 12px; color: var(--ink-4); margin-top: 3px; }
html.classico .sidebar__scroll { background: #FFFFFF; padding: 4px; }
html.classico .sidebar__section { color: #000; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 12px; padding: 8px 4px 2px; border-bottom: 1px solid var(--w-basso-2); box-shadow: 0 1px 0 var(--w-alto); margin-bottom: 2px; }
html.classico .nav-link { border-radius: 0; color: #000; font-weight: 400; font-size: 13px; padding: 3px 6px; gap: 6px; }
html.classico .nav-link svg { width: 16px; height: 16px; opacity: 1; }
html.classico .nav-link:hover { background: transparent; text-decoration: underline; }
html.classico .nav-link--active, html.classico .nav-link--active:hover { background: var(--blue); color: #fff; box-shadow: none; text-decoration: none; }
/* le voci dei sottomenu, senza puntino (30/10/2026): il testo sotto quello
   della testata, oltre la sua icona (6 di margine, 16 di icona, 6 di spazio) */
html.classico .nav-link--sub { padding-left: 28px; }
html.classico .nav-link__mark { display: none; }
html.classico .nav-link__badge { border-radius: 0; background: #000; color: #fff; }
html.classico .nav-link__badge--allerta { background: #C00000; }
html.classico .sidebar__footer { border-top: 1px solid var(--w-basso-2); box-shadow: inset 0 1px 0 var(--w-alto); padding: 6px 4px 0; }
html.classico .sidebar__footer .avatar { border-radius: 0; width: 24px; height: 24px; font-size: 12px; background: var(--blue); color: #fff; }

html.classico .main {
  margin: 0 0 0 var(--sidebar-w); border-radius: 0; height: 100vh; background: var(--surface);
  box-shadow: none; border-left: 1px solid var(--w-alto);
}
html.classico .topbar {
  height: 28px; padding: 0 4px 0 8px; background: var(--w-titolo); border: 0; color: #fff;
  border-bottom: 2px solid var(--surface);
}
html.classico .topbar__title { font-size: 13px; font-weight: 700; letter-spacing: 0; color: #fff; }
html.classico .topbar__title::after { content: " - Gestionale Mobile Watt"; font-weight: 700; }
html.classico .topbar__right .avatar { display: none; }
html.classico .topbar__crumb, html.classico .topbar__crumb-sep { color: #fff; font-weight: 700; }
html.classico .topbar__date { color: #fff; }
html.classico .topbar__right::after {
  content: "_  □  ×"; font: 700 12px/16px Tahoma, sans-serif; color: #000; background: var(--surface);
  padding: 0 6px; letter-spacing: 6px; box-shadow: inset -1px -1px var(--w-basso), inset 1px 1px var(--w-alto);
}
html.classico .content { padding: 6px 8px 0; max-width: none; }

/* scorrimento come allora */
html.classico ::-webkit-scrollbar { width: 16px; height: 16px; }
html.classico ::-webkit-scrollbar-track { background: #E8E6E0; }
html.classico ::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 0;
  box-shadow: inset -1px -1px var(--w-basso), inset 1px 1px var(--w-alto), inset -2px -2px var(--w-basso-2); }
html.classico .sidebar__scroll { scrollbar-color: var(--surface) #E8E6E0; }

/* ---------------------------------------------------------- testa della pagina = barra degli strumenti */
html.classico .page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 0 0 6px; padding: 3px 4px 5px; border-bottom: 1px solid var(--w-basso-2); box-shadow: 0 1px 0 var(--w-alto); }
html.classico .page-head__title { display: none; }
html.classico .page-head__sub { font-size: 12px; color: var(--ink-4); max-width: 90ch; }
html.classico .page-head__tools { display: flex; gap: 4px; }

/* ---------------------------------------------------------- Apollo */
html.classico .bc { --ora: 44px; display: flex; flex-direction: column; min-height: calc(100vh - 28px); }
html.classico .bc-nav { gap: 0; border-bottom: 0; margin: 4px 0 0; padding-left: 2px; position: relative; z-index: 1; }
html.classico .bc-nav button {
  font-size: 13px; font-weight: 400; color: #000; padding: 3px 12px 2px; margin-right: -1px; background: var(--surface);
  border: 1px solid; border-color: var(--w-alto) var(--w-basso) transparent var(--w-alto); border-bottom: 0;
  box-shadow: inset -1px 0 var(--w-basso-2); margin-top: 2px;
}
html.classico .bc-nav button[aria-pressed="true"] { margin-top: 0; padding: 4px 14px 4px; margin-bottom: -1px; position: relative; z-index: 2; font-weight: 400; }
html.classico .bc-strumenti, html.classico .bc-legenda {
  margin: 0; padding: 6px; border: 1px solid; border-color: var(--w-alto) var(--w-basso) var(--w-basso) var(--w-alto);
  box-shadow: inset -1px -1px var(--w-basso-2); background: var(--surface);
}
html.classico .bc-legenda { border-top: 0; margin-bottom: 6px; color: #000; font-size: 12px; gap: 4px 14px; }
html.classico .bc-strumenti { border-bottom-width: 0; gap: 6px 10px; }
html.classico .bc-seg { background: transparent; border: 0; padding: 0; gap: 0; border-radius: 0; }
html.classico .bc-seg button, html.classico .bc-chip { background: var(--surface); color: #000; padding: 3px 10px; font-size: 13px; border-radius: 0; }
html.classico .bc-seg button[aria-pressed="true"], html.classico .bc-chip[aria-pressed="true"] {
  color: #000; border: 0;
  background: repeating-conic-gradient(#FFFFFF 0 25%, #D4D0C8 0 50%) 0 0 / 2px 2px;
  box-shadow: inset 1px 1px var(--w-basso), inset -1px -1px var(--w-alto), inset 2px 2px var(--w-basso-2);
}
html.classico .bc-periodo b { font-weight: 700; color: #000; }
html.classico .bc-colori { border-radius: 0; background: #FFFFE1; border: 1px solid #000; box-shadow: none; }
html.classico .bc-colori span, html.classico .bc-legenda span { color: #000; }
html.classico .bc-pallino { border-radius: 0; border: 1px solid #000; }
html.classico .bc-campione { border-radius: 0; border-color: #000; background-color: #FFFFFF; }
html.classico .bc-avviso { color: #7A4B00; }

/* il motivo dice il tipo di lavoro: tratti neri leggeri sulla tinta del contatto */
html.classico .t-installazione { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.14) 0 1px, transparent 1px 7px); }
html.classico .t-commerciale { background-image: radial-gradient(rgba(0,0,0,.22) 1px, transparent 1.2px); background-size: 6px 6px; }
html.classico .t-amministrazione { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 5px); }
html.classico .t-sviluppo { background-image: linear-gradient(rgba(0,0,0,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.09) 1px, transparent 1px); background-size: 7px 7px; }
html.classico .t-evento { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 2l1 2.2 2.3.2-1.8 1.6.5 2.3L6 7.1 4 8.3l.5-2.3L2.7 4.4 5 4.2z' fill='%23000' fill-opacity='.22'/%3E%3C/svg%3E"); }
html.classico .t-followup { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M7 1L3 7h2.4l-.8 4 4-6H6.2z' fill='%23000' fill-opacity='.22'/%3E%3C/svg%3E"); }

/* calendario: agenda da ufficio, griglia bianca a righe grigie */
html.classico .bc-cal { gap: 6px; flex: 1; }
html.classico .bc-lato { background: #FFFFFF; border: 0; padding: 6px; }
html.classico .bc-lato h3, html.classico .bc-lista h3 { color: #000; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 12px; }
html.classico .bc-lato p { color: var(--ink-4); }
html.classico .bc-settimana { background: #FFFFFF; border: 0; padding: 2px; }
html.classico .bc-riga { grid-template-columns: 86px repeat(var(--n), minmax(0, 1fr)); }
html.classico .bc-riga > div { border-left: 1px solid #C0C0C0; }
html.classico .bc-riga > .bc-et { hyphens: manual; overflow-wrap: normal; }
html.classico .bc-riga > .bc-et { color: #000; background: var(--surface); }
html.classico .bc-intesta > div { background: var(--surface); padding: 3px 6px; }
html.classico .bc-intesta .g { color: #000; text-transform: none; letter-spacing: 0; font-size: 12px; }
html.classico .bc-intesta .n { font-size: 14px; color: #000; }
html.classico .bc-intesta .oggi { background: var(--blue); box-shadow: inset -1px -1px var(--w-basso), inset 1px 1px #3A6EA5; }
html.classico .bc-intesta .oggi .g, html.classico .bc-intesta .oggi .n, html.classico .bc-intesta .oggi .carico { color: #fff; }
html.classico .bc-intesta .carico { color: var(--ink-4); }
html.classico .bc-posiziona, html.classico .bc-fatte { border-top: 1px solid #C0C0C0; border-bottom-color: #808080; }
html.classico .bc-tacche span { color: #000; }
html.classico .bc-giorno { background-image: linear-gradient(#C0C0C0 1px, transparent 1px), linear-gradient(#ECECEC 1px, transparent 1px);
  background-size: 100% var(--ora), 100% calc(var(--ora) / 2); }
html.classico .bc-giorno.oggi { background-color: #FFFFE1; }
html.classico .bc-giorno.sopra, html.classico .bc-posiziona > [data-giorno].sopra, html.classico .bc-lato.sopra { background-color: #C8D8F0; }
html.classico .bc-blocco, html.classico .bc-dafare, html.classico .bc-card {
  border-radius: 0; border: 1px solid #000; color: #000;
  background-color: color-mix(in srgb, var(--c) 45%, #FFFFFF);
}
html.classico .bc-blocco { padding: 1px 4px; font-weight: 700; font-size: 12px; }
html.classico .bc-blocco.pieno { border-style: dashed; background-color: color-mix(in srgb, var(--c) 18%, #FFFFFF); color: #000; }
html.classico .bc-blocco.fatto { opacity: 1; color: var(--ink-4); text-decoration: line-through; }
html.classico .bc-blocco small, html.classico .bc-dafare small { color: #202020; font-size: 12px; }
html.classico .bc-blocco.in-moto { box-shadow: 2px 2px 0 #000; opacity: 1; }
html.classico .bc-maniglia::after { border-radius: 0; background: #000; height: 2px; }
html.classico .bc-dafare { font-weight: 700; font-size: 12px; padding: 3px 5px; }
html.classico .bc-chi b { border-radius: 0; background: #FFFFFF; color: #000; border: 1px solid #808080; line-height: 15px; font-weight: 400; }
html.classico .bc-giafatte, html.classico .bc-fattaline { color: #000; }
html.classico .bc-giafatte::before { color: #000; }
html.classico .bc-fattaline i { border-radius: 0; border: 1px solid #000; }
html.classico .bc-etichetta-moto { border-radius: 0; background: #FFFFE1; color: #000; border: 1px solid #000; box-shadow: none; font-weight: 400; }
html.classico .bc-adesso { height: 2px; background: #C00000; }
html.classico .bc-adesso::before { border-radius: 0; background: #C00000; }

/* mese */
html.classico .bc-mese { background: #FFFFFF; padding: 2px; gap: 0; }
html.classico .bc-mese .gg { border-radius: 0; background: #FFFFFF; border: 0; border-right: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; }
html.classico .bc-mese .gg.oggi { background: #FFFFE1; outline: 2px solid var(--blue); outline-offset: -2px; }
html.classico .bc-mese .gg.fuori { opacity: 1; background: #F0EEE8; color: var(--ink-5); }
html.classico .bc-mese .num { color: #000; }
html.classico .bc-mese .r { color: #000; }
html.classico .bc-mese .r i { border-radius: 0; border: 1px solid #000; }
html.classico .bc-mese .gs { color: #000; text-transform: none; letter-spacing: 0; background: var(--surface); padding: 2px 6px;
  box-shadow: inset -1px -1px var(--w-basso), inset 1px 1px var(--w-alto); }

/* lista e contatti: riquadri di gruppo */
html.classico .bc-lista, html.classico .bc-contatti { max-width: none; }
html.classico .bc-card .titolo { font-size: 13px; }
html.classico .bc-card .meta { color: #202020; }
html.classico .bc-fatto-sett, html.classico .bc-contatto {
  border-radius: 0; background: var(--surface); border: 1px solid var(--w-basso-2); box-shadow: 1px 1px 0 var(--w-alto), inset 1px 1px 0 var(--w-alto);
}
html.classico .bc-contatto > .testa { color: #000; }
html.classico .bc-contatto .ruolo, html.classico .bc-contatto .ultimo { color: var(--ink-4); }
html.classico .bc-turno { border-radius: 0; border: 1px solid #808080; }
html.classico .bc-turno.noi { background: #FFFFE1; color: #000; }
html.classico .bc-turno.loro { background: #FFFFFF; color: #000; }
html.classico .bc-storia { border-top: 1px solid var(--w-basso-2); }
html.classico .bc-storia h4, html.classico .bc-st { color: #000; text-transform: none; letter-spacing: 0; font-weight: 700; }

/* la scheda aperta è una finestra di dialogo */
html.classico .bc-velo { background: transparent; }
html.classico .bc-pannello {
  background: var(--surface); border: 0; padding: 0 10px 14px; gap: 10px; width: min(500px, 100%);
  box-shadow: inset -1px -1px var(--w-basso), inset 1px 1px var(--w-alto-2), inset -2px -2px var(--w-basso-2), inset 2px 2px var(--w-alto), -2px 0 0 rgba(0,0,0,.25);
}
html.classico .bc-pannello::before {
  content: "Scheda"; display: block; margin: 3px -7px 0; padding: 3px 6px; background: var(--w-titolo); color: #fff; font-weight: 700; font-size: 13px;
}
html.classico .bc-pannello h2 { font-size: 15px; font-weight: 700; }
html.classico .bc-campi dt { color: var(--ink-4); }
html.classico .bc-campi dd { color: #000; }
html.classico .bc-quando input, html.classico .bc-quando select, html.classico .bc-modulo input,
html.classico .bc-modulo select, html.classico .bc-modulo textarea {
  background: #FFFFFF; border: 0; border-radius: 0; padding: 4px 5px; font-size: 13px; color: #000;
}
html.classico .bc-quando label, html.classico .bc-modulo label { color: #000; font-size: 12px; }
html.classico .bc-sel { outline: 1px solid #000 !important; outline-offset: -4px; color: #000 !important; }
html.classico .bc-passo { border-bottom: 1px solid #C0C0C0; }
html.classico .bc-passo input { accent-color: var(--blue); width: 14px; height: 14px; }
html.classico .bc-passo label { color: #000; font-size: 13px; }
html.classico .bc-passo small { color: var(--ink-4); }
html.classico .bc-stato { border-radius: 0; background: #FFFFFF; color: #000; border: 1px solid #808080; }
html.classico .bc-stato.ok { background: #FFFFFF; color: #006400; }
html.classico .bc-registro li, html.classico .bc-aiuto { color: var(--ink-4); }

/* barra di stato in fondo alla finestra */
html.classico .w2k-stato { display: flex; gap: 2px; margin-top: auto; padding: 6px 0 2px; font-size: 12px; color: #000; position: sticky; bottom: 0; z-index: 10; background: var(--surface); }
html.classico .w2k-stato span { padding: 1px 6px; box-shadow: inset 1px 1px var(--w-basso-2), inset -1px -1px var(--w-alto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.classico .w2k-stato span:first-child { flex: 1; }
.w2k-stato { display: none; }
html.classico .w2k-stato { display: flex; }

/* ---------------------------------------------------------- tutto il gestionale */
html.classico .card, html.classico .hm-kpi, html.classico .hcard, html.classico .hm-card {
  border-radius: 0; background: var(--surface); border: 1px solid var(--w-basso-2); box-shadow: 1px 1px 0 var(--w-alto), inset 1px 1px 0 var(--w-alto);
}
html.classico .card__head { border-bottom: 1px solid var(--w-basso-2); box-shadow: 0 1px 0 var(--w-alto); }
html.classico .card__title { font-weight: 700; letter-spacing: 0; }
html.classico .eyebrow { color: #000; text-transform: none; letter-spacing: 0; font-weight: 700; }
html.classico .input, html.classico input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html.classico textarea, html.classico select {
  background-color: #FFFFFF; color: #000; border: 0; border-radius: 0; font-size: 13px;
  box-shadow: inset 1px 1px var(--w-basso-2), inset -1px -1px var(--w-alto), inset 2px 2px var(--w-basso), inset -2px -2px var(--w-alto-2);
}
html.classico .input:focus, html.classico input:focus, html.classico textarea:focus, html.classico select:focus { outline: 1px dotted #000; outline-offset: -4px; }
html.classico ::placeholder { color: #808080; }
html.classico .field__label { color: #000; }
/* liste e tabelle come le liste di Windows: bianche, intestazioni a bottone */
html.classico table { background: #FFFFFF; border-collapse: collapse; }
html.classico th { background: var(--surface); color: #000; font-weight: 400; text-transform: none; letter-spacing: 0;
  box-shadow: inset -1px -1px var(--w-basso-2), inset 1px 1px var(--w-alto); }
html.classico td { border-color: #E0E0E0; color: #000; }
html.classico tr:hover td { background: #E8F0FA; }
html.classico .lead-row, html.classico .ld-row, html.classico .tm-row, html.classico .ct-row { background: #FFFFFF; border-color: #E0E0E0; }
html.classico .lead-row:hover, html.classico .ld-row:hover, html.classico .tm-row:hover, html.classico .ct-row:hover { background: #E8F0FA; }
html.classico .mw-table, html.classico .em-list, html.classico .em-reader {
  background: #FFFFFF; border: 0; border-radius: 0;
  box-shadow: inset 1px 1px var(--w-basso-2), inset -1px -1px var(--w-alto), inset 2px 2px var(--w-basso), inset -2px -2px var(--w-alto-2);
}
html.classico .mw-table { padding: 2px; }
html.classico .mw-thead { background: var(--surface); color: #000; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13px; padding: 4px 16px;
  border-bottom: 0; box-shadow: inset -1px -1px var(--w-basso-2), inset 1px 1px var(--w-alto); }
html.classico .mw-row { border-bottom-color: #E0E0E0; font-size: 13px; }
html.classico .mw-row:hover, html.classico .em-item:hover { background: #E8F0FA; }
html.classico .em-item { border-bottom-color: #E0E0E0; }
html.classico .em-item.is-active { background: #C8D8F0; box-shadow: inset 3px 0 0 var(--blue); }
html.classico .mw-kpi { border-radius: 0; background: var(--surface); border: 1px solid var(--w-basso-2); box-shadow: 1px 1px 0 var(--w-alto), inset 1px 1px 0 var(--w-alto); }
html.classico .mw-dot, html.classico .em-item__av, html.classico .hmail__av { border-radius: 0; }

/* pannelli che si aprono: finestre */
html.classico .drawer, html.classico .imodal, html.classico .em-modal, html.classico .login-card {
  border-radius: 0; background: var(--surface); border: 0;
  box-shadow: inset -1px -1px var(--w-basso), inset 1px 1px var(--w-alto-2), inset -2px -2px var(--w-basso-2), inset 2px 2px var(--w-alto), 2px 2px 0 rgba(0,0,0,.35);
}
html.classico .scrim, html.classico .imodal-scrim, html.classico .em-modal-scrim { background: rgba(0,0,0,.25); backdrop-filter: none; }
html.classico .toast { background: #FFFFE1; color: #000; border: 1px solid #000; border-radius: 0; box-shadow: none; }
html.classico .chtip { background: #FFFFE1; color: #000; border: 1px solid #000; border-radius: 0; }
html.classico .chip { border-radius: 0; }
html.classico .login-mark { border-radius: 0; background: none; }
html.classico .spinner { border-radius: 0; }
/* Home: il benvenuto era testo bianco sul grafite */
html.classico .hm-hero { background: #FFFFFF; color: #000; border-radius: 0;
  box-shadow: inset 1px 1px var(--w-basso-2), inset -1px -1px var(--w-alto), inset 2px 2px var(--w-basso), inset -2px -2px var(--w-alto-2); }
html.classico .hm-hero__sub { color: var(--ink-4); }
html.classico .hm-chip { color: #000; background: var(--surface); border: 0; border-radius: 0;
  box-shadow: inset -1px -1px var(--w-basso), inset 1px 1px var(--w-alto), inset -2px -2px var(--w-basso-2); }
html.classico .hm-chip:hover { background: var(--surface); }
html.classico .hm-btn-ghost { background: var(--surface); color: #000; border: 0; }
html.classico .hm-chip .hdot { border-radius: 0; background: #008000; }
html.classico .btn--ai { background: var(--surface); color: #000; }
html.classico .btn--ai .ic { color: #000; }
html.classico .btn--success { background: var(--surface); color: #006400; }
html.classico .cal-msg--user { border-radius: 0; }
html.classico .pdf { border-radius: 0; box-shadow: 2px 2px 0 rgba(0,0,0,.35); }

/* ---------------------------------------------------------- telefono */
@media (max-width: 900px) {
  html.classico .bc-riga { grid-template-columns: 86px repeat(var(--n), minmax(0, 1fr)); }
  html.classico .bc-giorni-tel { gap: 2px; }
  html.classico .bc-giorni-tel button { border-radius: 0; background: var(--surface); color: #000; }
  html.classico .bc-giorni-tel button[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: inset 1px 1px var(--w-basso), inset -1px -1px var(--w-alto); }
}
@media (max-width: 760px) {
  html.classico .main { margin: 0; height: auto; border-left: 0; }
  html.classico .topbar { height: calc(28px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
  html.classico .topbar__title::after { content: ""; }
  html.classico .sidebar { background: var(--surface); box-shadow: 2px 0 0 #000; }
  html.classico .nav-link { min-height: 40px; font-size: 14px; }
  html.classico .mobilenav { background: var(--surface); border-top: 0; box-shadow: inset 0 1px var(--w-alto), 0 -1px 0 var(--w-basso-2); }
  html.classico .mnav-link { color: #000; border-radius: 0; }
  html.classico .mnav-link--active { color: #fff; background: var(--blue); }
  html.classico .w2k-stato { display: none; }
  html.classico .page-head__sub { display: none; }
}