/* =============================================================================
   Tema Horus — variabili di brand condivise da area ordini e Formazione.
   Colore primario: #00A092 (logo ufficiale). Font: Barlow (titoli) + Roboto (testo).
   Vedi docs/modello-dati.md §14.
   ============================================================================= */

:root {
  --horus-primario: #00a092;
  --horus-primario-scuro: #00806f;
  --horus-secondario: #3f6d78; /* teal-ardesia: marcatore occhio sinistro, complementare nella stessa famiglia */
  --horus-scuro: #1c363d;
  --horus-accento: #d39121;
  --horus-errore: #dc3131;
  --horus-errore-sfondo: #feedec;
  --horus-testo: #2b2f38;
  --horus-testo-tenue: #6b7078;
  --horus-bordo: #dde0e0;
  --horus-sfondo: #ffffff;
  --horus-sfondo-alt: #f4f5f5; /* riempimento chip / righe alternate */
  --horus-canvas: #eceeee; /* area di lavoro dietro i pannelli bianchi */
  --horus-grigio-logo: #878787;

  --horus-font-titoli: "Barlow", "Segoe UI", system-ui, sans-serif;
  --horus-font-testo: "Roboto", "Segoe UI", system-ui, sans-serif;

  --horus-raggio: 10px;
  --horus-ombra: 0 1px 3px rgba(28, 54, 61, 0.1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--horus-font-testo);
  font-weight: 400;
  color: var(--horus-testo);
  background: var(--horus-sfondo-alt);
  line-height: 1.55;
}

h1, h2, h3, h4 {
  font-family: var(--horus-font-titoli);
  font-weight: 600;
  color: var(--horus-scuro);
  line-height: 1.2;
}

a { color: var(--horus-primario); }
a:hover { color: var(--horus-primario-scuro); }

.pulsante {
  display: inline-block;
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
  line-height: 1.4; /* un <button> ha "normal" da UA stylesheet, un <a> eredita
    l'1.55 del body: senza un valore esplicito qui i due si allineano in
    larghezza ma non in altezza a parità di padding (visibile affiancando
    Cerca/Azzera filtri). */
  padding: 10px 20px;
  border: none;
  border-radius: var(--horus-raggio);
  background: var(--horus-primario);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.pulsante:hover { background: var(--horus-primario-scuro); color: #fff; }

/* --- Layout di autenticazione --- */
.auth-schermata {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--horus-sfondo);
  border: 1px solid var(--horus-bordo);
  border-radius: var(--horus-raggio);
  box-shadow: var(--horus-ombra);
  padding: 32px;
}
.auth-card h1 {
  margin: 0 0 4px;
  font-size: 1.4rem;
}
.auth-card .sottotitolo {
  margin: 0 0 24px;
  color: var(--horus-testo-tenue);
  font-size: 0.9rem;
}
.auth-card label {
  display: block;
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  font-size: 0.85rem;
  margin-bottom: 4px;
  color: var(--horus-scuro);
}
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--horus-bordo);
  border-radius: 6px;
  font-family: var(--horus-font-testo);
  font-size: 0.95rem;
}
.auth-card input:focus {
  outline: 2px solid var(--horus-primario);
  outline-offset: 1px;
  border-color: var(--horus-primario);
}
.auth-card .pulsante { width: 100%; }
.auth-card .link-secondari {
  margin-top: 16px;
  font-size: 0.85rem;
  text-align: center;
}
.messaggio-errore {
  background: var(--horus-errore-sfondo);
  border: 1px solid var(--horus-errore);
  color: var(--horus-errore);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 0.88rem;
}
.errorlist {
  list-style: none;
  padding: 0;
  margin: -12px 0 12px;
  color: var(--horus-errore);
  font-size: 0.82rem;
}

/* =============================================================================
   Area applicativa (post-login): guscio, tabelle, badge, dettaglio.
   ============================================================================= */

/* Guscio a tutta pagina: topbar fissa in alto, poi [sidebar | area di lavoro].
   Solo l'area di lavoro scrolla. */
.app-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 16px;
}

/* --- Barra superiore --- */
.app-topbar {
  flex-shrink: 0;
  background: var(--horus-scuro);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 28px;
  min-height: 72px;
}
.app-topbar__logo { display: flex; align-items: center; }
.app-topbar__logo img { height: 44px; display: block; }
.app-nav {
  display: flex;
  gap: 6px;
  flex: 1;
  align-self: stretch;
}
.app-nav a {
  display: flex;
  align-items: center;
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 0 16px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.app-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.app-nav a.attivo {
  color: #fff;
  border-bottom-color: var(--horus-primario);
}
.app-topbar__utente {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
}
.app-topbar__utente form { margin: 0; }
.app-topbar__esci {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 7px 16px;
  border-radius: 7px;
  cursor: pointer;
}
.app-topbar__esci:hover { background: rgba(255, 255, 255, 0.12); }

/* Banner di degrado soft (§3.8.10): cliente o destinazione disattivati lato Iridio
   mentre un account ci è legato — esplicito e permanente, su ogni pagina dell'area
   applicativa, mai un 403 che sembra un guasto. */
.banner-degrado {
  flex-shrink: 0;
  background: #fbf3e4;
  border-bottom: 1px solid var(--horus-accento);
  color: #7a5a12;
  padding: 10px 28px;
  font-size: 0.88rem;
  text-align: center;
}

/* --- Corpo: sidebar + area di lavoro --- */
.app-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* Sidebar = pannello con sfondo proprio, non ereditato. Solo in "Lenti RGP". */
.app-sidebar {
  flex-shrink: 0;
  width: 232px;
  background: var(--horus-sfondo);
  border-right: 1px solid var(--horus-bordo);
  padding: 22px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.app-sidebar a {
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--horus-testo);
  text-decoration: none;
  padding: 11px 14px;
  border-radius: 8px;
  border-left: 3px solid transparent;
}
.app-sidebar a:hover { background: var(--horus-sfondo-alt); }
.app-sidebar a.attivo {
  background: rgba(0, 160, 146, 0.1);
  border-left-color: var(--horus-primario);
  color: var(--horus-primario-scuro);
}

/* Area di lavoro: riempie tutto lo spazio restante, scroll proprio. */
.app-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--horus-canvas);
  padding: 32px 40px 56px;
}
.app-contenuto { min-width: 0; }
.page-intestazione {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.page-intestazione h1 { margin: 0; font-size: 1.75rem; }
.page-intestazione h1 .badge { margin-left: 12px; vertical-align: middle; }
.page-intestazione .sottotitolo { margin: 5px 0 0; color: var(--horus-testo-tenue); font-size: 0.98rem; }
.sottotitolo__portatore { font-weight: 700; color: var(--horus-accento); }
/* Variante con il pulsante a destra centrato in altezza sull'intero blocco
   titolo+sottotitolo, non solo sulla prima riga (il default "baseline" del
   pannello serve altrove, es. "Le mie lenti", dove non c'è un pulsante da
   allineare). */
.page-intestazione--centrato { align-items: center; }
.pulsante-indietro { flex-shrink: 0; white-space: nowrap; }
/* Stesso pulsante, ma da solo sopra il titolo (non affiancato) — serve il
   margine che altrove viene dal gap del genitore flex. */
.pulsante-indietro--sopra-titolo { display: inline-block; margin-bottom: 14px; }
.titolo-con-azione {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.titolo-con-azione h1 { margin: 0; }
.titolo-portatore { color: var(--horus-primario-scuro); }
.breadcrumb {
  font-size: 0.82rem;
  color: var(--horus-testo-tenue);
  margin-bottom: 8px;
}
.breadcrumb a { text-decoration: none; }

/* --- Card --- */
.card {
  background: var(--horus-sfondo);
  border: 1px solid var(--horus-bordo);
  border-radius: var(--horus-raggio);
  box-shadow: var(--horus-ombra);
  padding: 20px 22px;
}
.card + .card { margin-top: 18px; }
.card h2 {
  margin: 0 0 14px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--horus-testo-tenue);
}

.griglia-riepilogo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.stat {
  background: var(--horus-sfondo);
  border: 1px solid var(--horus-bordo);
  border-radius: var(--horus-raggio);
  padding: 18px 20px;
}
.stat__valore {
  font-family: var(--horus-font-titoli);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--horus-scuro);
  line-height: 1;
}
.stat__etichetta {
  margin-top: 6px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--horus-testo-tenue);
}

/* --- Tabella dati --- */
.tabella-wrap { overflow-x: auto; }
table.dati {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.dati th {
  text-align: left;
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 0.75rem;
  color: var(--horus-testo-tenue);
  padding: 10px 12px;
  border-bottom: 2px solid var(--horus-bordo);
  white-space: nowrap;
}
table.dati td {
  padding: 12px;
  border-bottom: 1px solid var(--horus-bordo);
  vertical-align: top;
}
table.dati tbody tr:last-child td { border-bottom: none; }
table.dati tr.cliccabile:hover { background: var(--horus-sfondo-alt); cursor: pointer; }
table.dati td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dati a { text-decoration: none; font-weight: 400; }
table.dati .grigia td { color: var(--horus-testo-tenue); }

/* --- Badge di stato --- */
.badge {
  display: inline-block;
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge--neutro { background: #eef0f1; color: var(--horus-scuro); }
.badge--attesa { background: #fdf1de; color: #8a5a12; }
.badge--ok { background: #daf0ec; color: var(--horus-primario-scuro); }
.badge--forte { background: rgba(0, 160, 146, 0.18); color: var(--horus-primario-scuro); font-weight: 600; }
.badge--errore { background: var(--horus-errore-sfondo); color: var(--horus-errore); }
.badge--muto { background: #eef0f1; color: var(--horus-testo-tenue); }

/* --- Barra filtri --- */
.filtri {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.filtri a {
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 0.76rem;
  padding: 6px 13px;
  border: 1px solid var(--horus-bordo);
  border-radius: 999px;
  color: var(--horus-testo-tenue);
  text-decoration: none;
  background: var(--horus-sfondo);
}
.filtri a:hover { border-color: var(--horus-primario); color: var(--horus-primario); }
.filtri a.attivo {
  background: var(--horus-primario);
  border-color: var(--horus-primario);
  color: #fff;
}

/* --- Lista descrittiva (dettaglio) --- */
dl.descrizione {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 20px;
  margin: 0;
  font-size: 0.9rem;
}
dl.descrizione dt {
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 0.75rem;
  color: var(--horus-testo-tenue);
  padding-top: 2px;
}
dl.descrizione dd { margin: 0; }

.parametri-lente {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 6px;
}
.parametri-lente span {
  background: var(--horus-sfondo-alt);
  border: 1px solid var(--horus-bordo);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.parametri-lente span b {
  font-weight: 500;
  color: var(--horus-testo-tenue);
  margin-right: 4px;
}
/* Descrizione estesa del campo al passaggio del mouse (es. "R0" → "Raggio
   base"), dove disponibile — tooltip nativo del browser, stesso pattern già
   usato per l'aiuto sui campi del form (niente testo che rompe il layout).
   Cursore lasciato invariato di proposito: niente «?» (cursor: help) che
   Francesco non voleva vedere. */

/* --- Stato vuoto --- */
.vuoto {
  text-align: center;
  padding: 48px 24px;
  color: var(--horus-testo-tenue);
}
.vuoto p { margin: 0; }

/* --- Paginazione --- */
.paginazione {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  font-size: 0.85rem;
  color: var(--horus-testo-tenue);
}
.paginazione a {
  text-decoration: none;
  border: 1px solid var(--horus-bordo);
  border-radius: 6px;
  padding: 5px 12px;
  background: var(--horus-sfondo);
}
.paginazione a:hover { border-color: var(--horus-primario); }

.messaggio-info {
  background: #eef6f5;
  border: 1px solid #bfe0db;
  color: var(--horus-primario-scuro);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 0.88rem;
}

/* =============================================================================
   Moduli (form) — nuova richiesta.
   ============================================================================= */
.modulo { margin: 0; }
.modulo + .modulo { margin-top: 16px; }

/* Griglia generica dei campi di form (testata, occhio/causale/riferimento,
   linea/geometria/materiale, quantità/note…): un campo per cella, etichetta
   sopra l'input, colonne responsive automatiche. NON è la griglia tecnica —
   quella ha una classe sua, `.griglia-parametri`, apposta per non ereditare
   nulla di qui (§6.2.1.1: sono due impaginazioni diverse per contenuti
   diversi, esattamente come in Iridio la griglia tecnica è un componente a
   parte dai campi di testata del form). */
.griglia-campi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 18px;
  margin-bottom: 14px;
}

/* Contenitore della griglia PARAMETRI TECNICI (contratto §6.2.1.1, solo
   `_campi_geometria.html`): `container-type` lo rende l'ancora delle
   @container qui sotto. Serve un elemento dedicato perché una griglia non
   può interrogare la propria larghezza — la interroga il genitore.
   Deliberatamente una *container* query, non una *media* query: la larghezza
   utile non è quella della finestra ma quella che resta dopo la sidebar fissa
   (232px, .app-sidebar) e, nel form due occhi, dopo lo split a metà fra le
   due colonne occhio — su una finestra larga la sidebar da sola può bastare a
   far sì che 4 colonne reali stiano strette anche se la finestra è "larga". */
.campi-geometria { container-type: inline-size; }

/* Griglia a 4 colonne dei parametri tecnici: ogni cella porta la sua
   posizione come custom property (--col/--riga, valorizzate inline dal
   template), non come grid-column/grid-row diretti — così le @container qui
   sotto possono farla degradare a 2/1 colonne senza toccare l'HTML. Un campo
   attivato da una lavorazione (§6.2.2) sta nella sua cella come qualunque
   altro; nascosto con `hidden` non sposta gli altri, perché ogni cella ha
   una posizione fissa e indipendente (a differenza dello stack flex di
   Iridio, qui non servono blocchi fantasma). */
/* Separa i campi di testata (occhio/causale/linea/geometria/materiale) dalla
   griglia tecnica sotto — sul modello di Iridio, dove sono due componenti
   distinti del form, non un unico blocco continuo. */
.separatore-tecnico {
  border: none;
  border-top: 1px solid var(--horus-bordo);
  margin: 4px 0 16px;
}

.griglia-parametri {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 16px;
  margin-bottom: 14px;
  min-width: 0;
}

/* Campo compatto orizzontale (etichetta a sinistra, input a destra sulla
   stessa riga) — SOLO qui: `.campo` fuori da `.griglia-parametri` resta il
   layout a colonna di sempre (etichetta sopra), invariato ovunque nel resto
   del form. */
.griglia-parametri > .campo {
  grid-column: var(--col, auto);
  grid-row: var(--riga, auto);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
/* Larghezza dell'etichetta FISSA, non "quanto serve": è quello che rende la
   griglia una tabella — stesso punto di partenza e stessa larghezza per
   l'input in ogni cella della griglia, non solo dentro la stessa colonna.
   Il valore copre le etichette più lunghe viste sui dati reali ("Ecc. Est.",
   "Toll. r0"); un'etichetta più lunga tronca in ellissi invece di rompere
   l'allineamento (il `title` sulla label resta il modo per leggerla intera). */
.griglia-parametri > .campo > .campo__label {
  flex: 0 0 4.6em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.griglia-parametri > .campo > .campo__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 5px 8px;
  font-size: 0.88rem;
}
/* Spacer (§6.2.1.1): buco voluto dal layout, non un campo — nessuna
   etichetta/input, solo lo spazio per non far collassare la riga quando è
   l'unico contenuto di quella riga in tutte le colonne. */
.griglia-parametri > .campo--spacer { min-height: 10px; }

@container (max-width: 600px) {
  .griglia-parametri { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Sotto le soglie responsive le posizioni esplicite di Iridio (§6.2.1.1)
     smettono di valere: a 4 colonne rimpicciolite i campi diventerebbero
     illeggibili. La griglia degrada ad auto-flow e segue l'ordine del DOM,
     già in ordine di lettura riga-per-riga (ordini/views.py). */
  .griglia-parametri > .campo { grid-column: auto; grid-row: auto; }
  .griglia-parametri > .campo--spacer { display: none; }
}
@container (max-width: 320px) {
  .griglia-parametri { grid-template-columns: minmax(0, 1fr); }
}

.campo { display: flex; flex-direction: column; gap: 4px; }
/* `hidden` da solo perde contro `display: flex` qui sopra: nella cascata CSS
   una regola d'autore vince sempre su quella (di user-agent) che l'attributo
   porterebbe da solo, indipendentemente dalla specificità. Serve una regola
   d'autore esplicita e più specifica — usata dai campi "extra" attivati da una
   lavorazione (§6.2.2), es. cyl/ax: senza questa restano visibili anche se
   marcati `hidden`. Va dopo le regole della griglia qui sopra: stessa
   specificità di `.griglia-parametri > .campo`, vince chi viene dopo nel
   foglio. */
.campo[hidden] { display: none; }
.campo__label {
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--horus-scuro);
}
.obbl { color: var(--horus-errore); }

.modulo input[type="text"],
.modulo input[type="number"],
.modulo select,
.modulo textarea,
.campo__input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--horus-bordo);
  border-radius: 6px;
  font-family: var(--horus-font-testo);
  font-size: 0.92rem;
  background: var(--horus-sfondo);
  color: var(--horus-testo);
}
.modulo input:focus,
.modulo select:focus,
.modulo textarea:focus,
.campo__input:focus {
  outline: 2px solid var(--horus-primario);
  outline-offset: 1px;
  border-color: var(--horus-primario);
}
.campo__input--breve { max-width: 140px; }

/* Select nativi ridisegnati: frecetta propria invece di quella del sistema
   operativo, stato disabled leggibile (usato dalla cascata linea → geometria/
   materiale). Resta un <select> vero — niente widget JS, solo CSS. */
.modulo select,
select.campo__input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7078' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.modulo select:hover:not(:disabled),
select.campo__input:hover:not(:disabled) {
  border-color: var(--horus-primario);
}
.modulo select:disabled,
select.campo__input:disabled {
  background-color: var(--horus-sfondo-alt);
  color: var(--horus-testo-tenue);
  cursor: not-allowed;
  opacity: 0.72;
}

/* Tendina del <select> personalizzata dove il browser lo permette (Chrome/Edge
   recenti, API "customizable select"): resta un <select> nativo, niente
   widget JS — dove non è supportata la tendina resta quella di sistema,
   invariata, nessuna regressione. Va dietro @supports per non rompere nulla
   sui browser che non conoscono ancora questa sintassi. */
@supports (appearance: base-select) {
  .modulo select,
  select.campo__input {
    appearance: base-select;
  }
  /* La modalità base-select aggiunge una propria freccia (::picker-icon):
     nascosta per non duplicare quella custom già disegnata sopra via
     background-image. */
  .modulo select::picker-icon,
  select.campo__input::picker-icon {
    display: none;
  }
  .modulo select::picker(select),
  select.campo__input::picker(select) {
    /* La ricetta ufficiale richiede "appearance: base-select" su ENTRAMBI,
       <select> e ::picker(select) — omesso solo sul primo, Chrome ignora
       tutto lo stile qui sotto e mostra ancora la tendina di sistema. */
    appearance: base-select;
    border: 1px solid var(--horus-bordo);
    border-radius: var(--horus-raggio);
    box-shadow: 0 12px 28px rgba(28, 54, 61, 0.18);
    padding: 4px;
  }
  .modulo select option,
  select.campo__input option {
    border-radius: 6px;
    padding: 8px 10px;
  }
  .modulo select option:hover,
  select.campo__input option:hover {
    background: rgba(0, 160, 146, 0.12);
    color: var(--horus-testo);
  }
  .modulo select option:checked,
  select.campo__input option:checked {
    background: rgba(0, 160, 146, 0.18);
    color: var(--horus-primario-scuro);
    font-weight: 500;
  }
}

/* Campo compilato con un valore diverso dal default: sfondo tenue per farlo
   riconoscere a colpo d'occhio nel pannello filtri, prima ancora di leggerne
   il contenuto. */
.campo__input--valorizzato {
  background-color: #eef6f5;
  border-color: var(--horus-primario);
}

/* Campo con pulsante "x" integrato per svuotarlo senza passare da "Azzera
   filtri" (testo libero, intervallo date — sui <select> resta solo la
   freccia, non c'è spazio per un secondo controllo). */
.campo__con-pulisci,
.intervallo-date__contenitore {
  position: relative;
  display: block;
}
.campo__con-pulisci .campo__input { padding-right: 30px; }
.campo__pulisci {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--horus-testo-tenue);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.campo__pulisci:hover { background: var(--horus-bordo); color: var(--horus-testo); }
.campo__pulisci[hidden] { display: none; }

.campo--puntino ul {
  list-style: none;
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 5px 0 0;
}
.campo--puntino label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 400;
  cursor: pointer;
}
.campo--puntino input[type="radio"] { width: auto; margin: 0; }

.campo__aiuto {
  margin: 0;
  font-size: 0.78rem;
  color: var(--horus-testo-tenue);
}
/* Valore forzato dall'ambito di un account (destinazione, §3.8.6): stesso
   riquadro di un select disabilitato, ma è un testo, non un campo di form —
   niente da inviare, il valore lo decide il server. */
.campo__valore-statico {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--horus-bordo);
  border-radius: 6px;
  background-color: var(--horus-sfondo-alt);
  color: var(--horus-testo-tenue);
  font-size: 0.92rem;
}
.campo__range {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--horus-sfondo-alt);
  font-variant-numeric: tabular-nums;
}

.lavorazioni {
  border: 1px solid var(--horus-bordo);
  border-radius: var(--horus-raggio);
  padding: 12px 14px;
  margin: 4px 0 14px;
}
.lavorazioni legend {
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--horus-testo-tenue);
  padding: 0 6px;
}

/* Lavorazioni come card cliccabili (non più checkbox in elenco verticale):
   checkbox nascosta + <label for> a fianco, stile a card — la selezione
   `:checked + .lavorazione-item__card` cambia bordo/sfondo/spunta, come nel
   form di riordino di Iridio, riportato ai colori del tema Horus. */
.lavorazioni-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.lavorazione-item { position: relative; }
.lavorazione-item__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.lavorazione-item__card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--horus-bordo);
  border-radius: var(--horus-raggio);
  background: var(--horus-sfondo);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
}
.lavorazione-item__card:hover { border-color: var(--horus-primario); }
.lavorazione-item__checkbox:focus-visible + .lavorazione-item__card {
  outline: 2px solid var(--horus-primario);
  outline-offset: 1px;
}
.lavorazione-item__checkbox:checked + .lavorazione-item__card {
  border-color: var(--horus-primario);
  background: #eef6f5;
}
.lavorazione-item__testo { font-size: 0.88rem; line-height: 1.3; }
.lavorazione-item__spunta {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--horus-bordo);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.lavorazione-item__spunta svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.lavorazione-item__checkbox:checked + .lavorazione-item__card .lavorazione-item__spunta {
  background: var(--horus-primario);
  border-color: var(--horus-primario);
}
.lavorazione-item__checkbox:checked + .lavorazione-item__card .lavorazione-item__spunta svg {
  opacity: 1;
}
.lavorazione-item__card:has(.lavorazione-item__valore) { flex-wrap: wrap; }
.lavorazione-item__valore {
  flex-basis: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--horus-bordo);
}
.lavorazione-item__valore .campo__input { max-width: 100%; }

.azioni {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}
.azioni--compatte { gap: 6px; }

.pulsante--fantasma {
  background: var(--horus-sfondo);
  color: var(--horus-primario);
  border: 1px solid var(--horus-primario);
}
.pulsante--fantasma:hover { background: var(--horus-sfondo-alt); color: var(--horus-primario-scuro); }
/* Regola del portale: i pulsanti hanno sempre uno sfondo pieno (mai
   outline/trasparente) — è il modo per distinguerli a colpo d'occhio dai
   badge, che invece sono sempre tenui/trasparenti. `--secondario` è la
   variante piena per le azioni non primarie (es. "torna indietro"). */
.pulsante--secondario {
  background: var(--horus-scuro);
  color: #fff;
  border: none;
}
.pulsante--secondario:hover { background: #142329; color: #fff; }
.pulsante--pericolo {
  background: var(--horus-errore);
  color: #fff;
  border: none;
}
.pulsante--pericolo:hover { background: #a51f1f; color: #fff; }
/* Variante per un'azione di reset (non distruttiva, non l'azione primaria):
   colore d'accento del tema — diverso sia dal teal di "Cerca" che dal blu
   scuro di "Ricerca avanzata", per restare distinguibile quando i due
   pulsanti stanno affiancati. */
.pulsante--terziario {
  background: var(--horus-accento);
  color: #fff;
  border: none;
}
.pulsante--terziario:hover { background: #b17715; color: #fff; }
/* Verde scuro del brand (la tonalità più cupa del teal primario, già usata
   come hover) come sfondo stabile — per un'azione di ritorno che non è
   "Torna indietro" nel senso già coperto da --secondario (blu scuro). */
.pulsante--verde-scuro {
  background: var(--horus-primario-scuro);
  color: #fff;
  border: none;
}
.pulsante--verde-scuro:hover { background: #006355; color: #fff; }
.pulsante--piccolo {
  padding: 5px 12px;
  font-size: 0.72rem;
}
/* "Cerca" affianca il campo di ricerca ingrandito (.campo__input--grande,
   48px): stessa altezza o poco meno, mai più alto del campo che completa. */
.pulsante--ricerca {
  padding: 12px 22px;
  font-size: 1rem;
}
.pulsante--grande {
  padding: 14px 26px;
  font-size: 1.02rem;
  font-weight: 600;
  box-shadow: var(--horus-ombra);
}
.page-intestazione__azioni {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.page-intestazione__azioni form { margin: 0; }
.pulsante:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.collegamento-pericolo {
  background: none;
  border: none;
  padding: 0;
  color: var(--horus-errore);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}
.collegamento-pericolo:hover { color: #a51f1f; }

/* Barra azioni fissa in fondo alla pagina di riordino "due occhi": ancorata
   al bordo inferiore della finestra (non di .app-main), quindi resta sempre
   attaccata in basso indipendentemente dallo scroll. Sfondo tenue (né bianco
   della sidebar né grigio canvas dell'area di lavoro, una via di mezzo) per
   non spiccare come un pannello a sé. */
.barra-conferma {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 40px;
  background: var(--horus-sfondo-alt);
  border-top: 1px solid var(--horus-bordo);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  z-index: 50;
}
@media (max-width: 640px) {
  .barra-conferma { padding: 12px 16px; }
}

/* --- Modale generica (usata da "Richiedi modifica del riferimento portatore") --- */
.overlay-modale {
  position: fixed;
  inset: 0;
  background: rgba(28, 54, 61, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.overlay-modale[hidden] { display: none; }
.modale {
  background: var(--horus-sfondo);
  border-radius: var(--horus-raggio);
  box-shadow: var(--horus-ombra);
  padding: 24px;
  width: 100%;
  max-width: 480px;
}
.modale h3 { margin: 0 0 8px; }
.modale textarea { width: 100%; resize: vertical; }
/* Variante per una modale di sola conferma (titolo + testo + pulsanti, niente
   form): centrata invece che allineata a sinistra come il default (pensato
   per un form con textarea, es. "richiedi modifica del riferimento
   portatore" — quella resta a sinistra). */
.modale--centrata { text-align: center; }
.modale--centrata .azioni { justify-content: center; }

.errore-campo {
  color: var(--horus-errore);
  font-size: 0.82rem;
}

/* =============================================================================
   Storico per-lente — pannello filtri, albero DX/SX, occhi dell'ordine.
   ============================================================================= */
.pannello-filtri { margin-bottom: 18px; }
.pannello-filtri label { display: flex; flex-direction: column; gap: 4px; }
.pannello-filtri__etichetta {
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--horus-testo-tenue);
}

/* Ogni riga è il suo grid: il pannello non tratta tutti i campi allo stesso
   modo (una griglia sola, auto-fit) ma li raggruppa per significato — ricerca
   da sola, il terzetto linea/geometria/materiale (che si condizionano a
   vicenda) in un riquadro proprio, poi le coppie destinazione/stato e le due
   date. */
.pannello-filtri__riga {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 16px;
}
.pannello-filtri__riga + .pannello-filtri__riga,
.pannello-filtri__riga + .pannello-filtri__gruppo,
.pannello-filtri__gruppo + .pannello-filtri__riga {
  margin-top: 14px;
}
.pannello-filtri__riga--2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pannello-filtri__riga--3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.pannello-filtri__gruppo {
  background: var(--horus-sfondo-alt);
  border-radius: 8px;
  padding: 14px 16px 12px;
}
.pannello-filtri__nota {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--horus-testo-tenue);
}

/* Riga sempre in vista: ricerca libera + Cerca/Azzera/toggle "Ricerca
   avanzata" — tutto il resto del pannello (linea/geometria/materiale,
   destinazione, stato, date) sta dentro il contenitore a scomparsa qui sotto. */
.pannello-filtri__riga-principale {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 16px;
}
/* Il campo di ricerca è il punto d'ingresso principale del pannello: più
   grande e più largo degli altri, per essere il primo che si nota in pagina. */
.pannello-filtri__campo-ricerca { flex: 1 1 320px; max-width: 460px; }
.campo__input--grande {
  padding: 13px 16px;
  font-size: 1.05rem;
  border-width: 1.5px;
}
.campo__con-pulisci .campo__input--grande { padding-right: 38px; }
.pannello-filtri__azioni-principali {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 240px;
}
/* Azzera filtri + "Ricerca avanzata" volutamente lontani da Cerca, e vicini
   fra loro (agiscono entrambi sui filtri, non sulla ricerca testuale) —
   ancorati insieme al bordo destro della riga. */
.pannello-filtri__azioni-a-destra { margin-left: auto; }

/* Pannello "Ricerca avanzata": aperto/chiuso via classe .aperto (JS) o già
   in partenza se il server rileva un filtro avanzato attivo nell'URL — mai
   solo `hidden`, altrimenti un filtro impostato ma non visibile confonderebbe
   più che aiutare. Trucco grid-template-rows 0fr↔1fr per un'altezza animata
   senza doverla calcolare in JS. */
.pannello-filtri__avanzata-contenitore {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.pannello-filtri__avanzata-contenitore.aperto { grid-template-rows: 1fr; }
/* "assestato" (via JS, a transizione finita): solo allora l'overflow torna
   visibile, altrimenti il calendario di Data ordine/spedizione — che deve
   uscire dal riquadro verso il basso — resterebbe tagliato dall'overflow
   hidden che serve invece per l'animazione di apertura/chiusura. */
.pannello-filtri__avanzata-contenitore.assestato .pannello-filtri__avanzata-interno {
  overflow: visible;
}
.pannello-filtri__avanzata-interno {
  overflow: hidden;
  min-height: 0;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--horus-bordo);
}

/* --- Intervallo di date a singolo campo (stile Airbnb/Skyscanner) --- */
.intervallo-date { position: relative; display: flex; flex-direction: column; gap: 4px; }
.intervallo-date__campo {
  display: flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  background-image: none;
}
.intervallo-date__contenitore .intervallo-date__campo { padding-right: 30px; }
.intervallo-date__testo { color: var(--horus-testo-tenue); }
.intervallo-date--attivo .intervallo-date__campo { background-color: #eef6f5; border-color: var(--horus-primario); }
.intervallo-date--attivo .intervallo-date__testo { color: var(--horus-testo); font-weight: 500; }
.intervallo-date--aperto .intervallo-date__campo {
  border-color: var(--horus-primario);
  outline: 2px solid var(--horus-primario);
  outline-offset: 1px;
}

.intervallo-date__popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  background: var(--horus-sfondo);
  border: 1px solid var(--horus-bordo);
  border-radius: var(--horus-raggio);
  box-shadow: 0 12px 28px rgba(28, 54, 61, 0.18);
  padding: 16px;
}
.intervallo-date__popover[hidden] { display: none; }
.intervallo-date__mesi { display: flex; gap: 20px; }

.calendario-mese { width: 220px; }
.calendario-mese__intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--horus-scuro);
  margin-bottom: 8px;
}
.calendario-mese__nav {
  border: none;
  background: none;
  color: var(--horus-testo-tenue);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}
.calendario-mese__nav:hover { background: var(--horus-sfondo-alt); color: var(--horus-primario); }
.calendario-mese__giorni-settimana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.calendario-mese__giorni-settimana span {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  color: var(--horus-testo-tenue);
}
.calendario-mese__griglia {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.calendario-mese__giorno {
  border: none;
  background: none;
  padding: 6px 0;
  font-size: 0.84rem;
  font-family: var(--horus-font-testo);
  color: var(--horus-testo);
  cursor: pointer;
  border-radius: 6px;
}
.calendario-mese__giorno:hover { background: rgba(0, 160, 146, 0.12); }
.calendario-mese__giorno--fuori { color: var(--horus-bordo); }
.calendario-mese__giorno--oggi { font-weight: 700; color: var(--horus-primario-scuro); }
.calendario-mese__giorno--in-intervallo { background: rgba(0, 160, 146, 0.12); border-radius: 0; }
.calendario-mese__giorno--selezionato {
  background: var(--horus-primario);
  color: #fff;
  font-weight: 600;
}

.intervallo-date__piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--horus-bordo);
}
.intervallo-date__link {
  border: none;
  background: none;
  color: var(--horus-testo-tenue);
  font-family: var(--horus-font-testo);
  font-size: 0.86rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.intervallo-date__link:hover { color: var(--horus-primario); }

/* --- Dettaglio lente: due colonne (occhi | albero) --- */
/* Le due colonne hanno la stessa altezza (una riga fissa legata alla finestra):
   ogni colonna scorre internamente, la pagina non scorre. */
.lente-dettaglio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  /* L'intestazione si è accorciata (badge in linea col titolo, pulsante
     sulla stessa riga invece che impilato sopra) — spazio recuperato dato
     alle colonne, misurato nel browser per restare senza scrollbar di
     pagina (l'unico scroll interno resta quello di .albero-scroll). */
  height: calc(100vh - 240px);
  min-height: 380px;
  margin-bottom: 0;
}
.lente-dettaglio > .card {
  margin-top: 0; /* annulla `.card + .card` sul secondo fratello */
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lente-dettaglio__occhi { gap: 14px; overflow-y: auto; }
/* Le card dei due occhi crescono per riempire lo spazio verticale libero
   nella colonna (c'è sempre più altezza disponibile di quanta ne serva al
   solo contenuto): condiviso in parti uguali tra le due, contenuto
   verticalmente centrato dentro la card più alta invece di lasciare vuoto
   in fondo. Testo scalato di conseguenza — solo qui (selettori annidati
   sotto .lente-dettaglio__occhi), non nelle stesse classi condivise altrove
   (griglia di "Le mie lenti", mini card dell'albero). */
.lente-dettaglio__occhi .occhio-card { flex: 1; display: flex; flex-direction: column; }
.lente-dettaglio__occhi .occhio-card__testa { padding: 10px 14px; font-size: 0.85rem; }
.lente-dettaglio__occhi .occhio-lente {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}
.lente-dettaglio__occhi .occhio-lente__riga a { font-size: 1.2rem; }
.lente-dettaglio__occhi .occhio-lente__riga .badge { font-size: 0.78rem; padding: 4px 11px; }
.lente-dettaglio__occhi .occhio-lente__meta { font-size: 0.92rem; margin-top: 6px; }
.lente-dettaglio__occhi .parametri-lente { gap: 8px 10px; margin-top: 10px; }
.lente-dettaglio__occhi .parametri-lente span { font-size: 0.92rem; padding: 4px 10px; }
.lente-dettaglio__occhi .occhio-card__vuota { flex: 1; font-size: 0.95rem; }
.sottotitolo--storico {
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sottotitolo--storico-esteso {
  font-size: 0.86rem;
  line-height: 1.5;
}
.albero-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--horus-bordo);
  border-radius: 8px;
  background: var(--horus-canvas);
  padding: 12px;
}

/* --- Occhi dell'ordine --- */
.occhi-ordine {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.occhio-card {
  border: 1px solid var(--horus-bordo);
  border-radius: var(--horus-raggio);
  overflow: hidden;
}
.occhio-card--vuota { opacity: 0.7; }
.occhio-card__testa {
  background: var(--horus-sfondo-alt);
  padding: 8px 12px;
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--horus-scuro);
  border-bottom: 1px solid var(--horus-bordo);
}
/* Stessa altezza della card piena accanto: entrambe crescono nella stessa
   colonna flex (.lente-dettaglio__occhi .occhio-card), qui basta centrare il
   contenuto — un occhio senza lenti in questo ordine non deve "saltare
   all'occhio" per dimensione, solo per contenuto. */
.occhio-card__vuota {
  margin: 0;
  padding: 14px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.85rem;
  color: var(--horus-testo-tenue);
}
.occhio-lente { padding: 12px; }
.occhio-lente + .occhio-lente { border-top: 1px solid var(--horus-bordo); }
.occhio-lente--corrente { background: #eef6f5; }
.occhio-lente__riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.occhio-lente__meta { font-size: 0.82rem; color: var(--horus-testo-tenue); margin-top: 4px; }

/* --- Albero DX/SX: mini card intabellate --- */
.albero-storico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 440px;
}
.albero-storico__intestazione {
  position: sticky;
  top: -12px;
  z-index: 1;
  background: var(--horus-canvas);
  font-family: var(--horus-font-titoli);
  font-weight: 500;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--horus-testo-tenue);
  padding: 2px 0 5px;
  border-bottom: 2px solid var(--horus-bordo);
}
.albero-cella {
  border: 1px solid var(--horus-bordo);
  border-radius: 7px;
  padding: 8px 9px;
  background: var(--horus-sfondo);
}
.albero-cella--vuota {
  border-style: dashed;
  background: var(--horus-sfondo-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.albero-cella--attiva {
  border-color: var(--horus-primario);
  box-shadow: 0 0 0 2px rgba(0, 160, 146, 0.18);
}
.albero-cella__nulla { font-size: 0.78rem; color: var(--horus-testo-tenue); }
.albero-cella__testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.albero-cella__meta { font-size: 0.8rem; color: var(--horus-testo-tenue); margin-top: 4px; }

/* --- Form "due occhi": storico cliccabile + le due colonne --- */
.albero-scroll--due-occhi { max-height: 320px; }
.cella-storico-selezionabile {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.albero-cella:has(.cella-storico-selezionabile:hover),
.albero-cella:has(.cella-storico-selezionabile:focus-visible) {
  border-color: var(--horus-primario);
  background: #eef6f5;
}
.albero-cella--assegnata-1 { border-color: var(--horus-primario); box-shadow: 0 0 0 2px rgba(0, 160, 146, 0.18); }
.albero-cella--assegnata-2 { border-color: var(--horus-secondario); box-shadow: 0 0 0 2px rgba(63, 109, 120, 0.18); }

.due-colonne {
  display: grid;
  /* minmax(0, 1fr), non 1fr: una traccia 1fr nuda non scende mai sotto la
     larghezza min-content del proprio contenuto — con la griglia parametri
     compatta a 4 colonne (.griglia-parametri) quel minimo supera la quota
     reale della colonna, spingendo l'intera pagina in overflow orizzontale invece
     di lasciar scattare la @container che la fa degradare a 2 colonne. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  /* Stesso ritmo verticale di `.card + .card` (riga sotto), qui esplicito
     perché il div non è un `.card`: entrambe le colonne staccate dallo
     storico sopra della stessa, piccola misura — non una (occhio 1) flush e
     l'altra (occhio 2) staccata, l'effetto di prima. */
  margin-top: 18px;
}
.due-colonne > .colonna-occhio {
  margin-top: 0; /* annulla `.card + .card`: qui le due card sono affiancate,
                    non impilate — senza, la seconda (occhio 2) parte 18px più
                    in basso della prima, le colonne non sono più allineate
                    fra loro (lo scarto dallo storico sopra lo dà la riga
                    precedente, non questa). */
}
.colonna-occhio__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.colonna-occhio__testa h2 { margin: 0; }
.colonna-occhio__titolo {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.colonna-occhio__testa-azioni {
  display: flex;
  align-items: center;
  gap: 12px;
}

.interruttore-puntino {
  display: flex;
  align-items: center;
  gap: 8px;
}
.interruttore-puntino__etichetta {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--horus-testo-tenue);
  white-space: nowrap;
}
.interruttore-puntino__opzioni {
  display: inline-flex;
  border: 1px solid var(--horus-bordo);
  border-radius: 999px;
  overflow: hidden;
}
.interruttore-puntino__opzione {
  position: relative;
  margin: 0;
  padding: 4px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--horus-testo-tenue);
  cursor: pointer;
  user-select: none;
}
.interruttore-puntino__opzione:not(:last-child) { border-right: 1px solid var(--horus-bordo); }
.interruttore-puntino__opzione input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
/* Colore dell'opzione attiva coerente con l'accento già usato per occhio
   destro/sinistro altrove in pagina (albero-cella--assegnata-*, lente-card--sx). */
.colonna-occhio[data-indice="1"] .interruttore-puntino__opzione:has(input:checked) {
  background: var(--horus-primario);
  color: #fff;
}
.colonna-occhio[data-indice="2"] .interruttore-puntino__opzione:has(input:checked) {
  background: var(--horus-secondario);
  color: #fff;
}
.interruttore-puntino__opzione:has(input:focus-visible) {
  outline: 2px solid var(--horus-primario);
  outline-offset: -2px;
}
.colonna-occhio__escluso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--horus-sfondo-alt);
  border: 1px dashed var(--horus-bordo);
  border-radius: var(--horus-raggio);
  color: var(--horus-testo-tenue);
}
.colonna-occhio__escluso p { margin: 0; }
/* [hidden] dello user-agent ha la stessa specificità di `.colonna-occhio__escluso`
   sopra: senza questa regola più specifica il placeholder resta visibile di
   default (stesso bug già visto su `.campo[hidden]`, vedi tema-horus.css). */
.colonna-occhio__escluso[hidden] { display: none; }
@media (max-width: 900px) {
  .due-colonne { grid-template-columns: 1fr; }
  .albero-storico { min-width: 0; }
}
/* Spazio in fondo pari all'incirca all'altezza della barra fissa, così
   l'ultima card delle due colonne non resta nascosta sotto di essa. */
.due-colonne--con-barra-fissa { margin-bottom: 76px; }

/* --- "Le mie lenti": griglia di card (niente tabella) --- */
.lenti-conteggio {
  margin: 0 0 14px;
  color: var(--horus-testo-tenue);
  font-size: 0.95rem;
}
.lenti-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.lente-card {
  display: block;
  background: var(--horus-sfondo);
  border: 1px solid var(--horus-bordo);
  border-left: 4px solid var(--horus-primario); /* occhio destro */
  border-radius: var(--horus-raggio);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--horus-testo);
}
.lente-card--sx { border-left-color: var(--horus-secondario); }
.lente-card:hover {
  border-color: var(--horus-primario);
  border-left-color: var(--horus-primario);
  background: #fbfdfd;
}
.lente-card--sx:hover { border-color: var(--horus-secondario); border-left-color: var(--horus-secondario); }
.lente-card__testa {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lente-card__numero {
  font-family: var(--horus-font-titoli);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--horus-scuro);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.lente-card__occhio {
  font-family: var(--horus-font-titoli);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(0, 160, 146, 0.12);
  color: var(--horus-primario-scuro);
}
.lente-card__occhio--sx { background: rgba(63, 109, 120, 0.14); color: var(--horus-secondario); }
.lente-card__testa .badge { margin-left: auto; }
.lente-card__portatore {
  font-weight: 500;
  font-size: 1.02rem;
  margin: 10px 0 2px;
}
.lente-card__prodotto {
  font-size: 0.9rem;
  color: var(--horus-testo-tenue);
}
.lente-card .parametri-lente { margin-top: 12px; }
.lente-card__piede {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--horus-bordo);
  font-size: 0.85rem;
  color: var(--horus-testo-tenue);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .lente-dettaglio { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .lente-dettaglio > .card { height: auto; overflow: visible; }
  .lente-dettaglio__occhi { overflow: visible; }
  .albero-scroll { flex: none; max-height: 62vh; }
}

@media (max-width: 860px) {
  .app-body { flex-direction: column; }
  .app-sidebar {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--horus-bordo);
    padding: 12px 16px;
  }
  .app-sidebar a { border-left: 0; }
}

@media (max-width: 640px) {
  .app-shell { height: auto; overflow: visible; }
  .app-main { overflow: visible; }
  .app-topbar { gap: 12px; flex-wrap: wrap; min-height: 0; padding: 12px 16px; }
  .app-nav { order: 3; width: 100%; overflow-x: auto; }
  .app-main { padding: 24px 16px 40px; }
  .page-intestazione { flex-direction: column; }
  .lenti-griglia { grid-template-columns: 1fr; }
  dl.descrizione { grid-template-columns: 1fr; gap: 2px 0; }
  dl.descrizione dd { margin-bottom: 8px; }
  .occhi-ordine { grid-template-columns: 1fr; }
  .pannello-filtri__azioni { flex-direction: column; align-items: stretch; }
  .intervallo-date__mesi { flex-direction: column; gap: 12px; }
  .calendario-mese { width: 100%; }
  .intervallo-date__popover { left: 50%; transform: translateX(-50%); width: calc(100vw - 48px); max-width: 260px; }
}

/* =============================================================================
   Formazione — vetrina dei corsi (docs/modello-dati.md §10.8.1)
   ============================================================================= */
.corsi-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.corso-card {
  display: flex;
  flex-direction: column;
  background: var(--horus-sfondo);
  border: 1px solid var(--horus-bordo);
  border-radius: var(--horus-raggio);
  box-shadow: var(--horus-ombra);
  overflow: hidden;
  text-decoration: none;
  color: var(--horus-testo);
}
.corso-card:hover { border-color: var(--horus-primario); color: var(--horus-testo); }
.corso-card__immagine {
  aspect-ratio: 16 / 9;
  background: var(--horus-sfondo-alt);
  overflow: hidden;
}
.corso-card__immagine img { width: 100%; height: 100%; object-fit: cover; display: block; }
.corso-card__segnaposto {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--horus-font-titoli);
  font-size: 3rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--horus-primario);
  background: rgba(0, 160, 146, 0.08);
}
.corso-card__corpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 18px 18px;
  flex: 1;
}
.corso-card__titolo { margin: 0; font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--horus-scuro); }
.corso-card__breve { margin: 0; color: var(--horus-testo-tenue); font-size: 0.95rem; }
.corso-card__meta { margin: auto 0 0; font-size: 0.9rem; }
.corso-card__meta strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--horus-testo-tenue); font-weight: 500; }
.corso-card__meta--tenue { color: var(--horus-testo-tenue); }

.corso-galleria {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.corso-galleria img { border-radius: var(--horus-raggio); border: 1px solid var(--horus-bordo); object-fit: cover; display: block; }
.corso-galleria__principale { width: 100%; max-width: 760px; aspect-ratio: 16 / 9; }
.corso-galleria__miniatura { width: 120px; height: 80px; }
.corso-descrizione p { margin: 0 0 0.8em; }
.corso-descrizione p:last-child { margin-bottom: 0; }

/* --- Formazione: I miei corsi e repository dei materiali --- */
.corso-card__edizioni {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}
.corso-card__edizioni li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.corso-card__azioni { margin-top: auto; padding-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.corso-card__azioni .pulsante { position: relative; z-index: 1; }
.avanzamento { width: 100%; }
.avanzamento__etichetta { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--horus-testo-tenue); margin-bottom: 4px; }
.avanzamento__barra { height: 8px; border-radius: 4px; background: var(--horus-sfondo-alt); overflow: hidden; }
.avanzamento__riempimento { height: 100%; background: var(--horus-primario); }
.mie-edizioni { margin: 0; padding-left: 1.2em; }
.mie-edizioni li { margin: 2px 0; }
.edizione-assegnata { margin-left: 8px; }
.corso-card__titolo a { color: inherit; text-decoration: none; }
.corso-card__titolo a:hover { color: var(--horus-primario-scuro); }
a.corso-card__immagine { display: block; text-decoration: none; }

/* --- Formazione: richieste di partecipazione --- */
.stato-nota { font-size: 0.82rem; color: var(--horus-testo-tenue); margin-top: 4px; }
.stato-nota a { color: var(--horus-primario-scuro); }
.stato-azione { margin-top: 4px; }
.modale .campo + .campo { margin-top: 12px; }

/* Percorso di un corso online (F4.1) */
.percorso-lezioni { list-style: none; margin: 8px 0 0; padding: 0; }
.percorso-lezione { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--horus-sfondo-alt); }
.percorso-lezione:first-child { border-top: 0; }
.percorso-lezione__stato { width: 1.2em; text-align: center; color: var(--horus-testo-tenue); }
.percorso-lezione--fatta .percorso-lezione__stato { color: var(--horus-primario-scuro); font-weight: 700; }
.percorso-lezione__titolo { flex: 1; }
.percorso-lezione__meta { font-size: 0.85rem; color: var(--horus-testo-tenue); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.corso-descrizione ul, .corso-descrizione ol { margin: 0 0 0.8em; padding-left: 1.4em; }
.corso-descrizione h2, .corso-descrizione h3, .corso-descrizione h4 { margin: 1em 0 0.4em; }

/* Pagina della lezione (F4.2) */
.lezione-contesto { margin: 0 0 2px; font-size: 0.85rem; color: var(--horus-testo-tenue); }
.lezione-corpo { max-width: 72ch; line-height: 1.65; }
.lezione-corpo img { max-width: 100%; height: auto; }
.lezione-elenco { list-style: none; margin: 8px 0 0; padding: 0; }
.lezione-elenco li { padding: 7px 0; border-top: 1px solid var(--horus-sfondo-alt); }
.lezione-elenco li:first-child { border-top: 0; }
.lezione-elenco__meta { margin-left: 8px; font-size: 0.85rem; color: var(--horus-testo-tenue); }
.lezione-navigazione { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 4px 0 24px; }
.lezione-navigazione__destra { text-align: right; }
.percorso-lezione__titolo a { color: inherit; text-decoration: none; }
.percorso-lezione__titolo a:hover { color: var(--horus-primario-scuro); text-decoration: underline; }
@media (max-width: 640px) {
  .lezione-navigazione { grid-template-columns: 1fr; }
  .lezione-navigazione__destra { text-align: left; }
}
.corso-descrizione table { border-collapse: collapse; margin: 0 0 0.8em; }
.corso-descrizione th, .corso-descrizione td { border: 1px solid var(--horus-sfondo-alt); padding: 6px 10px; text-align: left; }
.corso-descrizione th { background: var(--horus-sfondo-alt); }

/* Quiz di autovalutazione (F4.4) */
.quiz-stato p { margin: 0 0 10px; }
.quiz-nota { font-size: 0.85rem; color: var(--horus-testo-tenue); }
.quiz-azioni { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.quiz-azioni form { margin: 0; }
.quiz-progresso { height: 6px; border-radius: 3px; background: var(--horus-sfondo-alt); overflow: hidden; margin: 0 0 14px; }
.quiz-progresso__riempimento { height: 100%; background: var(--horus-primario); }
.quiz-testo { font-size: 1.05rem; font-weight: 600; margin: 0 0 12px; }
.quiz-immagine { max-width: 100%; height: auto; margin: 0 0 12px; border-radius: 6px; }
.quiz-suggerimento { margin: 0 0 10px; color: var(--horus-testo-tenue); font-size: 0.9rem; }
.quiz-opzioni { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.quiz-opzione { border: 1px solid var(--horus-sfondo-alt); border-radius: 8px; }
.quiz-opzione label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; cursor: pointer; }
.quiz-opzione label:hover { background: var(--horus-sfondo-alt); }
.quiz-opzioni--bloccate .quiz-opzione { padding: 10px 12px; display: flex; gap: 10px; color: var(--horus-testo-tenue); }
.quiz-opzione--scelta { border-color: var(--horus-primario); color: var(--horus-testo); font-weight: 600; }
.quiz-esito { margin: 14px 0 0; }
.quiz-errore { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid var(--horus-errore); background: var(--horus-errore-sfondo); border-radius: 4px; }
.quiz-errore p { margin: 0; }
.quiz-errore__spiegazione { margin-top: 4px !important; }
.quiz-ricomincia { margin: 4px 0 24px; }
.quiz-punteggio { font-size: 2rem; font-weight: 700; margin: 0 0 6px; }
.quiz-punteggio span { font-size: 1rem; font-weight: 400; color: var(--horus-testo-tenue); }

/* Lezione video (F4.3) */
.video-cornice { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.video-cornice iframe, .video-cornice video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-contenitore { margin: 0 0 14px; }
.video-trascrizione { margin-top: 14px; }
.video-trascrizione summary { cursor: pointer; font-weight: 600; }