/* Fuel Go · linguaggio Windows 11 (Fluent): mica, strati bianchi, tratti sottili, accento blu */
:root {
  --sfondo: #f3f3f3;
  --strato: #ffffff;
  --strato-2: #f9f9f9;
  --riempi: rgba(0, 0, 0, .037);
  --riempi-2: rgba(0, 0, 0, .06);
  --tratto: rgba(0, 0, 0, .085);
  --tratto-forte: rgba(0, 0, 0, .16);
  --tratto-campo: #8a8a8a;
  --testo: #1b1b1b;
  --testo-2: #5c5c5c;
  --testo-3: #6b6b6b;
  --accento: #005fb8;
  --accento-h: #1a6ec0;
  --accento-p: #2f7dc8;
  --su-accento: #ffffff;
  --ok: #0e700e;
  --ok-sf: #dff6dd;
  --av: #8a5100;
  --av-sf: #fff4ce;
  --ko: #c42b1c;
  --ko-sf: #fde7e9;
  --info: #005fb8;
  --info-sf: #e5f0fa;
  --ombra-1: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .04);
  --ombra-2: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
  --ombra-3: 0 16px 32px rgba(0, 0, 0, .18), 0 0 8px rgba(0, 0, 0, .1);
  --r-1: 4px;
  --r-2: 8px;
  --curva: cubic-bezier(0, 0, 0, 1);
  --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --font-titolo: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --tocco: 44px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #202020;
    --strato: #2b2b2b;
    --strato-2: #272727;
    --riempi: rgba(255, 255, 255, .06);
    --riempi-2: rgba(255, 255, 255, .09);
    --tratto: rgba(255, 255, 255, .08);
    --tratto-forte: rgba(255, 255, 255, .16);
    --tratto-campo: #9a9a9a;
    --testo: #ffffff;
    --testo-2: #cfcfcf;
    --testo-3: #b4b4b4;
    --accento: #60cdff;
    --accento-h: #5bbde9;
    --accento-p: #56acd4;
    --su-accento: #000000;
    --ok: #6ccb5f;
    --ok-sf: #393d1b;
    --av: #fce100;
    --av-sf: #433519;
    --ko: #ff99a4;
    --ko-sf: #442726;
    --info: #60cdff;
    --info-sf: #1f3445;
    --ombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --ombra-2: 0 8px 16px rgba(0, 0, 0, .36);
    --ombra-3: 0 16px 32px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accento); color: var(--su-accento); }
a { color: var(--accento); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accento-h); }
h1, h2, h3 { font-family: var(--font-titolo); font-weight: 600; line-height: 1.25; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: 28px; }
h2 { font-size: 20px; margin: 32px 0 12px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; }
small { font-size: 12px; }
code { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: 13px; }
img { max-width: 100%; }
.ico { flex: none; width: 20px; height: 20px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tenue { color: var(--testo-2); }
.piccolo { font-size: 13px; }
.centro { text-align: center; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--testo); outline-offset: 1px; box-shadow: 0 0 0 1px var(--strato) inset; border-radius: var(--r-1); }
* { scrollbar-width: thin; scrollbar-color: var(--tratto-forte) transparent; }
.salta { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--strato); padding: 8px 12px; border-radius: var(--r-1); box-shadow: var(--ombra-2); }
.salta:focus { top: 8px; }

/* ---------------------------------------------------------------- controlli */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 6px 16px;
  font: 600 14px/20px var(--font); color: var(--testo); text-decoration: none;
  background: var(--strato); border: 1px solid var(--tratto); border-bottom-color: var(--tratto-forte);
  border-radius: var(--r-1); cursor: pointer; transition: background .12s;
}
.btn:hover { background: var(--strato-2); color: var(--testo); }
.btn:active { background: var(--sfondo); color: var(--testo-2); }
.btn[disabled], .btn[aria-busy] { opacity: .6; cursor: progress; }
.btn--primario { background: var(--accento); color: var(--su-accento); border-color: transparent; border-bottom-color: rgba(0, 0, 0, .35); }
.btn--primario:hover { background: var(--accento-h); color: var(--su-accento); }
.btn--primario:active { background: var(--accento-p); color: var(--su-accento); }
.btn--sottile { background: transparent; border-color: transparent; color: var(--testo); font-weight: 400; }
.btn--sottile:hover { background: var(--riempi); }
.btn--pericolo { color: var(--ko); }
.btn--largo { width: 100%; }
.btn--alto { min-height: 52px; font-size: 16px; }
.btn-icona {
  display: inline-grid; place-items: center; width: var(--tocco); height: var(--tocco);
  border: 0; border-radius: var(--r-1); background: transparent; color: var(--testo); cursor: pointer;
}
.btn-icona:hover { background: var(--riempi); color: var(--testo); }
.btn-icona[aria-busy] .ico { animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.indietro { margin: -4px 0 8px -12px; }

input, select, textarea {
  width: 100%; min-height: 40px; padding: 8px 11px;
  font: 15px/1.4 var(--font); color: var(--testo);
  background: var(--strato); border: 1px solid var(--tratto); border-bottom-color: var(--tratto-campo);
  border-radius: var(--r-1); caret-color: var(--accento);
}
input::placeholder, textarea::placeholder { color: var(--testo-3); }
input:hover, select:hover, textarea:hover { background: var(--strato-2); }
input:focus, select:focus, textarea:focus { outline: none; border-bottom: 2px solid var(--accento); padding-bottom: 7px; background: var(--strato); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--accento); }
input[type=file] { padding: 6px; }
textarea { resize: vertical; }
.num, td.num { font-variant-numeric: tabular-nums; text-align: right; }
.campo { margin-bottom: 16px; }
.campo label, .campo > span { display: block; margin-bottom: 6px; font-size: 14px; }
.campo label small, .titolo-sez small, legend small { color: var(--testo-2); font-weight: 400; margin-left: 4px; }
.campo--riga { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; margin-bottom: 8px; }
.campo--riga label { margin: 0; }
.interruttore { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tocco); cursor: pointer; }
.interruttore input { appearance: none; width: 40px; height: 20px; border: 1px solid var(--tratto-campo); border-radius: 10px; background: var(--strato); position: relative; transition: background .15s; flex: none; margin: 0; }
.interruttore input::after { content: ""; position: absolute; top: 3px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--testo-2); transition: transform .2s var(--curva); }
.interruttore input:checked { background: var(--accento); border-color: var(--accento); }
.interruttore input:checked::after { background: var(--su-accento); transform: translateX(19px); }
.interruttore input:focus-visible { outline: 2px solid var(--testo); outline-offset: 2px; }
.file-btn { cursor: pointer; position: relative; }
.file-btn.scelto { color: var(--ok); }
fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
legend { padding: 0; }
details > summary { cursor: pointer; min-height: var(--tocco); display: flex; align-items: center; gap: 6px; }

/* Selettore (SelectorBar) */
.selettore { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 8px; }
.selettore::-webkit-scrollbar { display: none; }
.selettore button, .pivot a {
  position: relative; flex: none; min-height: var(--tocco); padding: 0 12px;
  background: none; border: 0; border-radius: var(--r-1); cursor: pointer;
  font: 400 15px var(--font); color: var(--testo-2); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.selettore button:hover, .pivot a:hover { background: var(--riempi); color: var(--testo); }
.selettore [aria-checked=true], .pivot [aria-current] { color: var(--testo); font-weight: 600; }
.selettore [aria-checked=true]::after, .pivot [aria-current]::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 16px; height: 3px; margin-left: -8px;
  border-radius: 2px; background: var(--accento); animation: pillola .25s var(--curva);
}
@keyframes pillola { from { width: 0; margin-left: 0; } }

/* Segmenti (SegmentedControl) */
.segmenti { display: inline-flex; padding: 2px; gap: 2px; background: var(--riempi); border: 1px solid var(--tratto); border-radius: 6px; }
.segmenti button, .segmenti label span {
  min-height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r-1);
  background: none; font: 400 14px var(--font); color: var(--testo-2); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.segmenti button:hover, .segmenti label:hover span { color: var(--testo); background: var(--riempi); }
.segmenti [aria-checked=true], .segmenti input:checked + span { background: var(--strato); color: var(--testo); font-weight: 600; border-color: var(--tratto); box-shadow: var(--ombra-1); }
.segmenti label { display: flex; cursor: pointer; }
.segmenti input { position: absolute; opacity: 0; pointer-events: none; }
.segmenti input:focus-visible + span { outline: 2px solid var(--testo); outline-offset: 1px; }
.segmenti--pieno { display: flex; }
.segmenti--pieno label { flex: 1; }
.segmenti--pieno label span { flex: 1; min-height: 56px; padding: 6px 8px; text-align: center; }
.segmenti small { font-size: 12px; font-weight: 400; color: var(--testo-2); }
.segmenti input[value=bloccante]:checked + span { background: var(--ko); color: #fff; border-color: transparent; }
.segmenti input[value=bloccante]:checked + span small { color: #fff; }
@media (prefers-color-scheme: dark) { .segmenti input[value=bloccante]:checked + span, .segmenti input[value=bloccante]:checked + span small { color: #000; } }

/* Chip filtro */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; }
.chip span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--tratto-forte); border-radius: 18px; background: var(--strato); font-size: 14px; cursor: pointer;
}
.chip span .ico { width: 16px; height: 16px; }
.chip:hover span { background: var(--strato-2); }
.chip input:checked + span { background: var(--accento); color: var(--su-accento); border-color: var(--accento); }
.chip input:focus-visible + span { outline: 2px solid var(--testo); outline-offset: 2px; }

/* Etichette di stato */
.pill, .tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; min-height: 22px;
  border-radius: var(--r-1); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--riempi-2); color: var(--testo-2);
}
.pill .ico, .tag .ico { width: 14px; height: 14px; }
.pill--ok, .tag--ok { background: var(--ok-sf); color: var(--ok); }
.pill--av, .tag--av { background: var(--av-sf); color: var(--av); }
.pill--ko, .tag--ko { background: var(--ko-sf); color: var(--ko); }
.pill--info, .tag--info { background: var(--info-sf); color: var(--info); }
.conta { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--riempi-2); font-size: 12px; font-weight: 600; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.conta--ko, .btn .conta { background: var(--accento); color: var(--su-accento); }
.conta--ko { background: var(--ko); color: #fff; }

/* InfoBar */
.avviso {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 0 0 16px;
  border: 1px solid var(--tratto); border-radius: var(--r-1); background: var(--info-sf); font-size: 14px;
}
.avviso > .ico { color: var(--info); margin-top: 1px; }
.avviso--ok { background: var(--ok-sf); } .avviso--ok > .ico { color: var(--ok); }
.avviso--av { background: var(--av-sf); } .avviso--av > .ico { color: var(--av); }
.avviso--ko { background: var(--ko-sf); } .avviso--ko > .ico { color: var(--ko); }
.avviso .btn { margin-top: 8px; }

/* ---------------------------------------------------------------- superfici */
.superficie { background: var(--strato); border: 1px solid var(--tratto); border-radius: var(--r-2); padding: 20px; margin-bottom: 16px; }
.titolo-sez { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.pila > .superficie { margin-bottom: 12px; }
.griglia-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.griglia-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.griglia--stretta { grid-template-columns: 1fr 72px; }
.azioni { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.azioni--colonna { flex-direction: column; align-items: stretch; }
.intesta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dati { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 12px; font-size: 14px; }
.dati dt { color: var(--testo-2); }
.dati dd { margin: 0; }
.testo { white-space: pre-line; margin: 0; }
.vuoto-pagina { padding: 32px 20px; text-align: center; color: var(--testo-2); background: var(--strato); border: 1px dashed var(--tratto-forte); border-radius: var(--r-2); }
.copia { display: block; padding: 8px 10px; margin-bottom: 12px; background: var(--sfondo); border-radius: var(--r-1); word-break: break-all; user-select: all; }
.zona-rischio { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--tratto); }

.tabella-scorri { padding: 0; overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th { text-align: left; font-weight: 600; font-size: 12px; color: var(--testo-2); padding: 10px 16px; border-bottom: 1px solid var(--tratto); }
.tabella td { padding: 12px 16px; border-bottom: 1px solid var(--tratto); vertical-align: top; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella tr:hover td { background: var(--strato-2); }
.tabella .spento { opacity: .6; }

/* Righe degli ordini (ListView) */
.righe { list-style: none; margin: 0; padding: 4px; }
.riga {
  display: grid; grid-template-columns: 1fr auto 20px; gap: 14px; align-items: center;
  min-height: 64px; padding: 10px 12px; border-radius: var(--r-1); color: var(--testo); text-decoration: none;
}
.riga:hover { background: var(--riempi); color: var(--testo); }
.riga__corpo { min-width: 0; }
.riga__titolo { display: block; font-weight: 600; }
.riga__meta { display: block; font-size: 13px; color: var(--testo-2); }
.riga__vai { color: var(--testo-3); }
.riga__stato { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.righe li + li .riga { border-top: 1px solid var(--tratto); border-radius: 0; }

.barra-comandi { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pivot { display: flex; gap: 2px; margin-left: -12px; overflow-x: auto; }
.filtro-inline select { width: auto; min-width: 180px; }

/* ---------------------------------------------------------------- struttura area riservata */
.titolo-app { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 16px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; color: var(--testo); text-decoration: none; font: 600 15px var(--font-titolo); }
.marchio:hover { color: var(--testo); }
.marchio__ico { color: var(--accento); }
.marchio--grande { font-size: 22px; margin: 0 auto 20px; display: flex; justify-content: center; }
.marchio--grande .ico { width: 28px; height: 28px; }
.titolo-app__az { color: var(--testo-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titolo-app__menu { margin-left: auto; }

.pannello { display: flex; flex-direction: column; }
.pannello ul { list-style: none; margin: 0; padding: 4px; }
.pannello a {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 0 12px; margin: 2px 0;
  border-radius: var(--r-1); color: var(--testo); text-decoration: none; font-size: 14px;
}
.pannello a:hover { background: var(--riempi); }
.pannello a[aria-current] { background: var(--riempi-2); font-weight: 600; }
.pannello a[aria-current]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: 2px; background: var(--accento); }
.pannello__utente { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 8px 12px 16px; border-top: 1px solid var(--tratto); font-size: 13px; }
.pannello__utente > span:nth-child(2) { flex: 1; min-width: 0; }
.pannello__utente b, .pannello__utente small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pannello__utente small { color: var(--testo-2); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accento); color: var(--su-accento); font-weight: 600; flex: none; }

.demo-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--av-sf); color: var(--testo); font-size: 13px; border-bottom: 1px solid var(--tratto); }
.demo-bar .ico { color: var(--av); }
.pagina { padding: 24px 16px 96px; max-width: 1180px; }
.pagina > h1 { margin-bottom: 20px; }
.senza-nav .pagina { margin: 0 auto; }

.barra-basso { display: none; }

@media (min-width: 900px) {
  .con-nav { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: 48px auto 1fr; min-height: 100vh; }
  .con-nav .titolo-app { grid-column: 1 / -1; }
  .con-nav .titolo-app__menu { display: none; }
  .con-nav .pannello { grid-row: 2 / 4; position: sticky; top: 0; height: calc(100vh - 48px); }
  .con-nav .demo-bar, .con-nav .pagina { grid-column: 2; }
  .con-nav .demo-bar { border: 1px solid var(--tratto); border-radius: var(--r-2) 0 0 0; border-bottom: 0; }
  .con-nav .pagina { background: var(--strato-2); border: 1px solid var(--tratto); border-right: 0; border-bottom: 0; border-radius: var(--r-2) 0 0 0; padding: 28px 40px 64px; max-width: none; }
  .con-nav .demo-bar + .pagina { border-radius: 0; border-top: 0; }
  .con-nav .pagina > * { max-width: 1100px; }
}
@media (max-width: 899px) {
  .con-nav .pannello {
    position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(320px, 86vw);
    background: var(--strato); box-shadow: var(--ombra-3); border-radius: 0 var(--r-2) var(--r-2) 0;
    transform: translateX(-104%); transition: transform .3s var(--curva); padding-top: 12px; visibility: hidden;
  }
  .pannello-aperto .pannello { transform: none; visibility: visible; }
  .pannello a { min-height: var(--tocco); }
  .barra-basso {
    display: flex; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--strato) 88%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid var(--tratto);
  }
  .barra-basso a, .barra-basso button {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; border: 0; background: none; border-radius: var(--r-1); color: var(--testo-2); font: 12px var(--font); text-decoration: none; cursor: pointer;
  }
  .barra-basso [aria-current] { color: var(--accento); font-weight: 600; }
  .barra-basso [aria-current]::before { content: ""; position: absolute; top: 2px; width: 16px; height: 3px; border-radius: 2px; background: var(--accento); }
  .griglia-2, .griglia-3 { grid-template-columns: 1fr; }
  .griglia--stretta { grid-template-columns: 1fr 72px; }
  h1 { font-size: 24px; }
  .superficie { padding: 16px; }
  .btn { min-height: var(--tocco); }
}

/* Colonne principale + laterale */
.colonne { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .colonne { grid-template-columns: minmax(0, 1fr) 340px; } }

/* Accesso */
.accesso { max-width: 420px; margin: 7vh auto 0; }
.accesso h1 { margin-bottom: 6px; }
.demo-ruoli { display: grid; gap: 8px; margin: 16px 0; }
.demo-ruoli p { margin: 0; }
.demo-ruoli .btn { justify-content: flex-start; text-align: left; min-height: 60px; font-weight: 400; }
.demo-ruoli .btn .ico { color: var(--accento); }
.demo-ruoli .btn b, .demo-ruoli .btn small { display: block; }
.demo-ruoli .btn small { color: var(--testo-2); }
.separa { display: flex; align-items: center; gap: 12px; color: var(--testo-2); font-size: 13px; }
.separa::before, .separa::after { content: ""; flex: 1; height: 1px; background: var(--tratto); }

/* Richiesta di assistenza */
.tessere { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tessera input { position: absolute; opacity: 0; }
.tessera span {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 92px; padding: 14px;
  border: 1px solid var(--tratto-forte); border-radius: var(--r-2); background: var(--strato); cursor: pointer; font-weight: 600; font-size: 15px;
  transition: background .12s, border-color .12s;
}
.tessera span .ico { width: 24px; height: 24px; color: var(--accento); }
.tessera:hover span { background: var(--strato-2); }
.tessera input:checked + span { border: 2px solid var(--accento); padding: 13px; background: var(--info-sf); }
.tessera input:focus-visible + span { outline: 2px solid var(--testo); outline-offset: 2px; }
.dettagli { margin-bottom: 16px; border-top: 1px solid var(--tratto); }
.dettagli summary small { color: var(--testo-2); }
.invia-fisso { position: sticky; bottom: 76px; z-index: 5; padding-top: 8px; }
@media (min-width: 900px) { .invia-fisso { bottom: 16px; } .richiesta .invia-fisso .btn, .pila .invia-fisso .btn { width: auto; min-width: 240px; } }

/* Ordine */
.intesta-ordine { margin-bottom: 20px; }
.intesta-ordine p { margin: 0 0 6px; }
.intesta-ordine h1 { margin-bottom: 10px; }
.pillole { display: flex; flex-wrap: wrap; gap: 6px; }
.avanza .btn--alto { margin-top: 12px; }
.passi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; list-style: none; margin: 0 0 20px; padding: 0; counter-reset: p; }
.passi li { font-size: 12px; color: var(--testo-2); padding-top: 10px; position: relative; }
.passi li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--riempi-2); }
.passi .fatto::before { background: var(--accento); }
.passi .ora { color: var(--testo); font-weight: 600; }
.cronologia { list-style: none; margin: 0; padding: 0; }
.cronologia li { display: grid; grid-template-columns: 12px 1fr; gap: 14px; position: relative; padding-bottom: 18px; }
.cronologia li:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--tratto); }
.cronologia p { margin: 0 0 4px; font-size: 14px; }
.cronologia__punto { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--strato); border: 2px solid var(--tratto-forte); }
.cronologia__punto--completato { background: var(--ok); border-color: var(--ok); }
.cronologia__punto--nuovo { border-color: var(--ko); }
.cronologia__punto--assegnato, .cronologia__punto--accettato, .cronologia__punto--viaggio, .cronologia__punto--lavoro { background: var(--accento); border-color: var(--accento); }
.foto img { display: block; max-width: 240px; max-height: 180px; border-radius: var(--r-1); border: 1px solid var(--tratto); margin-top: 6px; object-fit: cover; }
.nota-form { border-top: 1px solid var(--tratto); padding-top: 16px; }
.nota-form textarea { margin-bottom: 8px; }
.nota-form .azioni { justify-content: space-between; }

/* Scheda impianto (modifica) */
.tabella-prezzi { width: 100%; border-collapse: collapse; }
.tabella-prezzi th { text-align: left; font-size: 14px; font-weight: 400; padding: 6px 12px 6px 0; }
.tabella-prezzi thead th { font-size: 12px; font-weight: 600; color: var(--testo-2); }
.tabella-prezzi td { padding: 4px 8px 4px 0; }
.tabella-prezzi input { max-width: 130px; }
.tabella-el input { max-width: 90px; }
.orari-griglia { max-width: 460px; margin-bottom: 8px; }
.servizi-edit { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 24px; }
@media (min-width: 700px) { .servizi-edit { grid-template-columns: 1fr 1fr; } }
.servizi-edit li { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- mappa pubblica */
.mappa-app { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.cmd {
  position: relative; z-index: 30; display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 8px 0 16px;
  background: var(--sfondo); border-bottom: 1px solid var(--tratto);
}
.cmd .marchio { margin-right: 12px; }
.cerca { position: relative; flex: 1; max-width: 420px; margin-left: auto; }
.cerca input { padding-left: 38px; min-height: 40px; border-radius: var(--r-1); }
.cerca input::-webkit-search-cancel-button { cursor: pointer; }
.cerca__ico { position: absolute; left: 11px; top: 10px; color: var(--testo-2); pointer-events: none; }
.suggerimenti {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px;
  background: var(--strato); border: 1px solid var(--tratto); border-radius: var(--r-2); box-shadow: var(--ombra-2);
  animation: apri .2s var(--curva);
}
.suggerimenti li { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: var(--tocco); padding: 0 12px; border-radius: var(--r-1); cursor: pointer; }
.suggerimenti li:hover, .suggerimenti [aria-selected=true] { background: var(--riempi); }
.suggerimenti small { color: var(--testo-2); }
.suggerimenti .nessuno { color: var(--testo-2); cursor: default; }
@keyframes apri { from { opacity: 0; transform: translateY(-4px); } }

.mappa-layout { position: relative; flex: 1; min-height: 0; }
.mappa { position: absolute; inset: 0; z-index: 0; background: #e8e4dc; }
.foglio { position: absolute; z-index: 20; display: flex; flex-direction: column; background: var(--strato); }
.foglio[aria-busy=true] .stato-dati::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border: 2px solid var(--accento); border-right-color: transparent; border-radius: 50%; animation: gira .8s linear infinite; vertical-align: -1px; }
.foglio__maniglia { display: none; }
.foglio .selettore { padding-top: 6px; flex: none; }
.comandi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 16px; flex: none; }
.comandi .btn { min-height: 38px; margin-left: auto; }
.filtri { padding: 4px 16px 12px; margin: 0; flex: none; }
.filtri legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; float: left; width: 100%; }
.stato-dati { margin: 0; padding: 4px 16px 8px; font-size: 12px; color: var(--testo-2); flex: none; border-bottom: 1px solid var(--tratto); }
.foglio__corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.risultati { list-style: none; margin: 0; padding: 4px; }
.ris {
  display: grid; grid-template-columns: 84px 1fr; gap: 12px; width: 100%; padding: 12px; text-align: left;
  background: none; border: 0; border-radius: var(--r-1); font: inherit; color: var(--testo); cursor: pointer;
}
.risultati li + li .ris { border-top: 1px solid var(--tratto); border-radius: 0; }
.ris:hover { background: var(--riempi); }
.ris--sel, .ris--sel:hover { background: var(--info-sf); }
.ris__prezzo b { display: block; font: 600 22px/1.1 var(--font-titolo); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ris__prezzo small { color: var(--testo-2); }
.ris__corpo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ris__nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ris__ind, .ris__meta { font-size: 13px; color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ris__tag { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.vecchio { color: var(--av); }
.risultati .vuoto { padding: 28px 16px; display: flex; flex-direction: column; gap: 6px; color: var(--testo-2); font-size: 14px; }
.risultati .vuoto b { color: var(--testo); }
.ris__prezzo b.basso { color: var(--ok); }

.scheda-imp { padding: 8px 16px 24px; outline: none; }
.scheda-imp .indietro { margin: 0 0 4px -12px; }
.scheda-imp__testa h2 { margin: 0 0 4px; font-size: 22px; }
.scheda-imp__testa p { color: var(--testo-2); margin: 0 0 8px; }
.scheda-imp__tag { display: flex; flex-wrap: wrap; gap: 6px; }
.scheda-imp .azioni { margin: 12px 0 8px; }
.scheda-imp .btn--largo { flex: 1; width: auto; min-height: 48px; font-size: 16px; }
.scheda-imp section { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--tratto); }
.scheda-imp h3 { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.scheda-imp h3 .ico { color: var(--accento); }
.prezzi { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prezzi th, .prezzi td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--tratto); }
.prezzi thead th { font-size: 12px; color: var(--testo-2); font-weight: 600; }
.prezzi th[scope=row] { text-align: left; font-weight: 400; padding-left: 0; }
.prezzi th small { color: var(--testo-2); }
.prezzi td b { display: block; font-size: 17px; }
.prezzi td small { color: var(--testo-2); }
.prezzi .nd { color: var(--testo-3); }
.prezzi .evid th, .prezzi .evid td { background: var(--info-sf); }
.prezzi .evid th { padding-left: 6px; border-radius: var(--r-1) 0 0 var(--r-1); }
.elenco-sem { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.elenco-sem li { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 36px; border-bottom: 1px solid var(--tratto); }
.elenco-sem .orario { display: inline-flex; gap: 8px; align-items: center; color: var(--testo-2); text-align: right; }
.orari .oggi { font-weight: 600; }
.nota { margin-top: 20px; font-size: 12px; color: var(--testo-2); }
.carica { padding: 24px 0; color: var(--testo-2); }

/* Pin sulla mappa */
.pin {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 7px));
  display: block; padding: 3px 8px; white-space: nowrap;
  font: 600 13px/18px var(--font); font-variant-numeric: tabular-nums; color: #1b1b1b;
  background: rgba(252, 252, 252, .94); border: 1px solid rgba(0, 0, 0, .14); border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2); cursor: pointer;
  animation: pin .3s var(--curva) both;
}
.pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -5px; border: 5px solid transparent; border-top-color: inherit; border-bottom: 0; }
.pin::after { border-top-color: rgba(252, 252, 252, .94); }
.pin--ass { border-color: var(--accento); }
.pin--top { background: #0e700e; color: #fff; border-color: #0a5a0a; }
.pin--top::after { border-top-color: #0e700e; }
.pin--sel { background: #005fb8; color: #fff; border-color: #004a8f; z-index: 2; transform: translate(-50%, calc(-100% - 7px)) scale(1.12); }
.pin--sel::after { border-top-color: #005fb8; }
@keyframes pin { from { opacity: 0; transform: translate(-50%, calc(-100% - 2px)) scale(.8); } }
.io { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #005fb8; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.io::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; background: rgba(0, 95, 184, .18); animation: onda 2.4s var(--curva) infinite; }
@keyframes onda { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.leaflet-container { font-family: var(--font); }
.leaflet-tile-pane { filter: saturate(.5) contrast(.96) brightness(1.02); }
.leaflet-bar { border: 1px solid var(--tratto) !important; border-radius: var(--r-2) !important; box-shadow: var(--ombra-2) !important; overflow: hidden; }
.leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; color: #1b1b1b !important; }
.leaflet-control-attribution { font-size: 11px; }

@media (min-width: 900px) {
  .foglio { top: 0; left: 0; bottom: 0; width: 420px; border-right: 1px solid var(--tratto); box-shadow: var(--ombra-1); }
  .mappa { left: 420px; }
}
@media (max-width: 899px) {
  .cmd { padding-left: 12px; }
  .cmd .marchio span { display: none; }
  .cmd .marchio { margin-right: 4px; }
  .foglio {
    --visibile: 252px;
    left: 0; right: 0; bottom: 0; height: 92%;
    border-radius: 12px 12px 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, .16);
    transform: translateY(calc(100% - var(--visibile)));
    transition: transform .35s var(--curva);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .foglio[data-stato=medio] { --visibile: 58%; }
  .foglio[data-stato=alto] { --visibile: 100%; }
  .foglio.trascina { transition: none; }
  .foglio[data-stato=basso] .foglio__corpo { overflow: hidden; }
  .foglio__maniglia { display: grid; place-items: center; width: 100%; height: 22px; border: 0; background: none; cursor: grab; touch-action: none; flex: none; }
  .foglio__maniglia span { width: 36px; height: 4px; border-radius: 2px; background: var(--tratto-forte); }
  .foglio .selettore { padding-top: 0; }
  .leaflet-top.leaflet-right { top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 899px) {
  .foglio[data-stato=basso] .comandi, .foglio[data-stato=basso] .filtri { display: none; }
  .comandi { flex-wrap: nowrap; padding: 6px 12px; gap: 6px; }
  .comandi .segmenti button { padding: 0 10px; }
  .comandi .btn { padding: 6px 10px; }
  .comandi .btn > span:not(.conta) { display: none; }
}
.pin::before { content: ""; position: absolute; inset: -10px -6px; }
.ris--top .ris__prezzo b, .ris__prezzo b.basso { color: var(--ok); }
@media (max-width: 899px) {
  .foglio.con-scheda .selettore, .foglio.con-scheda .comandi, .foglio.con-scheda .filtri, .foglio.con-scheda .stato-dati { display: none; }
  .comandi .btn, .segmenti button, .chip span, .leaflet-bar a { min-height: var(--tocco); }
  .leaflet-bar a { width: var(--tocco) !important; height: var(--tocco) !important; line-height: var(--tocco) !important; }
  .risultati li:first-child .ris__prezzo b { font-size: 28px; }
  .stato-dati { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.pin--esempio { border-style: dashed; border-color: #8a5100; }

/* Marchio (white label) */
.marchio__logo { height: 24px; width: auto; max-width: 160px; object-fit: contain; }
.marchio--grande .marchio__logo { height: 40px; max-width: 220px; }
.marchio > span { display: inline-flex; flex-direction: column; line-height: 1.2; }
.marchio__sub { font-size: 11px; font-weight: 400; color: var(--testo-2); }
.colonne__main > * + * { margin-top: 16px; }
.piede-marchio { padding: 16px; font-size: 12px; color: var(--testo-3); text-align: center; }
@media (min-width: 900px) { .con-nav .piede-marchio { grid-column: 2; } }