/* ==========================================================================
FAD Sicurezza — foglio di stile (base: Verde in Comune v3.0 "cruscotto")

Il riferimento grafico è il template Figma "Employee Management"
(StaffSphere): menu verticale bianco a sinistra con la voce attiva a
pillola piena, testata bianca con saluto, card bianche con gli angoli
morbidi, tessere-statistica con la macchia pastello e l'icona nel tondino,
tabelle leggere, font Poppins. Il turchese del template è diventato il
verde del marchio: verde come unico colore principale, bianco come sfondo,
gli altri colori solo dove servono a distinguere (stati, avvisi, tessere).
========================================================================== */

:root {
/* verde del marchio: RGB 0,99,42 */
--verde: #0b6b32;
--verde-scuro: #04421d;
--verde-vivo: #1faa6f;
--verde-medio: #2e9e63;
--verde-chiaro: #e3f4ea;
--verde-tenue: #f2f9f4;
--verde-ombra: rgba(11, 107, 50, .45);

--grigio: #f4f6f5; /* il fondo della pagina, appena grigio-verde */
--superficie: #ffffff;
--testo: #1b2620;
--testo-tenue: #66746b;
--testo-nav: #7d8b82;
--bordo: #e4eae6;
--bordo-forte: #cbd6cf;

--blu: #2f6fd6; --blu-scuro: #1f4f9e; --blu-chiaro: #eaf2ff;
--rosso: #d64545; --rosso-scuro: #9b2323; --rosso-chiaro: #fdecec;
--arancio: #f28f0a; --arancio-scuro:#b96b00; --arancio-chiaro: #fff4e5;
--viola: #6f52e6; --viola-scuro: #4a338f; --viola-chiaro: #f1eefe;
--giallo-chiaro: #fff8e1;

--r-xl: 18px; --r: 14px; --r-s: 10px; --r-xs: 8px;

--ombra-1: 0 1px 2px rgba(20, 40, 28, .04), 0 4px 14px -6px rgba(20, 40, 28, .10);
--ombra-2: 0 2px 4px rgba(20, 40, 28, .04), 0 12px 30px -14px rgba(20, 40, 28, .22);
--ombra-3: 0 18px 44px -16px rgba(20, 40, 28, .32);
--ombra-dentro: inset 0 1px 0 rgba(255, 255, 255, .18);

--sidebar-w: 262px;
--topbar-h: 74px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
background: var(--grigio);
color: var(--testo);
font-size: 15px;
line-height: 1.55;
}

a { color: var(--verde); }
strong, b { font-weight: 600; }

/* ==========================================================================
L'IMPALCATURA — menu a sinistra, il resto a destra
========================================================================== */
.app { display: flex; min-height: 100vh; }

.sidebar {
flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
background: var(--superficie);
border-right: 1px solid var(--bordo);
position: sticky; top: 0; height: 100vh;
display: flex; flex-direction: column;
overflow-y: auto; overscroll-behavior: contain;
z-index: 50;
}
.app-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* marchio in cima al menu */
.sb-brand {
display: flex; align-items: center; gap: 11px;
padding: 18px 20px 14px; text-decoration: none; color: inherit;
min-height: var(--topbar-h);
}
.sb-brand img.marchio-mini {
height: 42px; width: 42px; object-fit: contain; border-radius: 11px;
background: var(--verde-tenue); padding: 3px; flex: 0 0 auto;
}
.sb-brand .leaf { font-size: 26px; }
.brand-testo { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-testo strong { font-size: 17px; font-weight: 700; color: var(--verde-scuro); letter-spacing: -.01em; }
.brand-testo small { font-size: 11.5px; color: var(--testo-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* l'utente in fondo al menu */
.sb-piede { margin-top: auto; padding: 14px 14px 18px; border-top: 1px solid var(--bordo); }
.sb-utente {
display: flex; align-items: center; gap: 11px;
padding: 10px 12px; border-radius: 14px; background: var(--verde-tenue);
}
.sb-utente .ub-chi { text-align: left; font-size: 14px; min-width: 0; }
.sb-utente .ub-chi span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-utente .ub-chi small { display: block; }
.sb-esci {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 10px; padding: 9px 12px; border-radius: 10px;
color: var(--testo-tenue); text-decoration: none; font-weight: 500; font-size: 14px;
border: 1px solid var(--bordo);
}
.sb-esci svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sb-esci:hover { background: var(--rosso-chiaro); color: var(--rosso-scuro); border-color: #f3c9c9; }

/* le iniziali dentro il tondino */
.avatar {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
background: linear-gradient(145deg, var(--verde-vivo), var(--verde));
color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .02em;
box-shadow: 0 4px 12px -4px var(--verde-ombra);
}
.avatar.piccolo { width: 34px; height: 34px; font-size: 13px; }

/* ---------------------------------------------------------------- barra alta */
.topbar {
background: var(--superficie);
color: var(--testo);
min-height: var(--topbar-h);
padding: 10px 28px;
display: flex; align-items: center; gap: 16px;
border-bottom: 1px solid var(--bordo);
position: sticky; top: 0; z-index: 40;
}
.topbar .brand { display: none; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.topbar .marchio-mini { height: 36px; width: 36px; object-fit: contain; border-radius: 9px; }

.tb-menu {
display: none; flex: 0 0 auto; width: 42px; height: 42px;
border: 1px solid var(--bordo); border-radius: 11px; background: #fff;
cursor: pointer; place-items: center; color: var(--verde-scuro);
}
.tb-menu svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

.tb-saluto { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.tb-saluto > div { min-width: 0; }
.tb-mano { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.tb-saluto h1, .tb-titolo {
margin: 0; font-size: 19px; line-height: 1.2; font-weight: 700;
color: var(--verde-scuro); letter-spacing: -.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-saluto small { display: block; font-size: 12.5px; color: var(--testo-tenue); font-weight: 400; }

.tb-destra { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.tb-meteo {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 13px 7px 10px; border-radius: 999px;
background: var(--grigio); border: 1px solid var(--bordo);
text-decoration: none; color: var(--testo); font-size: 13.5px; font-weight: 500;
}
.tb-meteo:hover { background: var(--verde-chiaro); border-color: #cfe6d6; }
.tb-meteo .tm-icona { font-size: 20px; line-height: 1; }
.tb-meteo b { font-weight: 700; color: var(--verde-scuro); }
.tb-meteo span.tm-testo { color: var(--testo-tenue); }

.userbox { display: flex; align-items: center; gap: 10px; }
.ub-chi { display: flex; flex-direction: column; line-height: 1.2; text-align: right; font-weight: 600; font-size: 14px; }
.ub-chi small { font-weight: 400; color: var(--testo-tenue); font-size: 12px; }
.tb-esci {
display: inline-grid; place-items: center; width: 40px; height: 40px;
border-radius: 12px; border: 1px solid var(--bordo); background: #fff;
color: var(--testo-tenue); text-decoration: none;
}
.tb-esci svg { width: 19px; height: 19px; }
.tb-esci:hover { background: var(--rosso-chiaro); color: var(--rosso-scuro); border-color: #f3c9c9; }

.allerta {
color: #fff; font-weight: 600; padding: 11px 18px; text-align: center;
letter-spacing: .01em; position: relative; z-index: 30;
}

/* ==========================================================================
LA NAVIGAZIONE — nel menu a sinistra
Le voci sono pillole: quella attiva si riempie di verde, come nel
template. I gruppi ("Lavori", "Clienti", "Altro") si aprono in linea con
le sottovoci incolonnate, unite da una linguetta a sinistra.
========================================================================== */
.tabs {
display: flex; flex-direction: column; gap: 4px;
padding: 6px 14px 14px;
}
.tabs > a, .tabs summary {
display: flex; align-items: center; gap: 12px;
color: var(--testo-nav); text-decoration: none;
padding: 11px 14px; border-radius: 12px;
font-weight: 500; font-size: 14.5px;
white-space: nowrap; cursor: pointer;
transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.tabs > a:hover, .tabs summary:hover { background: var(--verde-tenue); color: var(--verde-scuro); }
.tabs > a.attiva, .tabs details.tab-menu.attiva > summary {
background: var(--verde); color: #fff; font-weight: 600;
box-shadow: 0 10px 20px -10px var(--verde-ombra);
}
.tabs details.tab-menu.attiva[open] > summary {
background: var(--verde-chiaro); color: var(--verde-scuro); box-shadow: none;
}
.tab-icona {
display: inline-grid; place-items: center; flex: 0 0 auto;
width: 22px; height: 22px; font-size: 17px; line-height: 1;
}
.tab-icona svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab-testo { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.tab-freccia { font-size: 11px; opacity: .6; margin-left: auto; transition: transform .15s ease; }
.tabs details[open] > summary .tab-freccia { transform: rotate(180deg); }

.tabs details.tab-menu { position: relative; }
.tabs details.tab-menu > summary { list-style: none; }
.tabs details.tab-menu > summary::-webkit-details-marker { display: none; }

.tab-tendina {
display: flex; flex-direction: column; gap: 2px;
margin: 4px 0 6px 25px; padding-left: 12px;
border-left: 1px solid var(--bordo-forte);
}
.tab-tendina a {
display: flex; align-items: center; gap: 10px; position: relative;
padding: 8px 12px; border-radius: 10px;
color: var(--testo-nav); text-decoration: none; font-weight: 500; font-size: 13.5px;
}
.tab-tendina a::before {
content: ""; position: absolute; left: -13px; top: 50%; width: 9px; height: 1px;
background: var(--bordo-forte);
}
.tab-tendina a:hover { background: var(--verde-tenue); color: var(--verde-scuro); }
.tab-tendina a.attiva { background: var(--verde-chiaro); color: var(--verde-scuro); font-weight: 600; }
.tab-tendina .tab-icona { width: 18px; height: 18px; font-size: 14px; }
.tab-tendina .tab-icona svg { width: 16px; height: 16px; }

/* il velo scuro dietro il menu aperto sul telefono */
.sb-velo { display: none; position: fixed; inset: 0; background: rgba(10, 25, 15, .45); z-index: 45; }

@media print { .barra-basso { display: none !important; } }

/* pallini contatore */
.pallino {
display: inline-block; min-width: 22px; text-align: center;
background: var(--rosso); color: #fff; border-radius: 999px;
font-size: 11.5px; font-weight: 700; padding: 2px 7px; line-height: 1.35;
}
.tabs .pallino { margin-left: auto; }
.tabs summary .pallino { margin-left: 0; }
.tabs > a.attiva .pallino, .tabs details.tab-menu.attiva > summary .pallino {
background: #fff; color: var(--rosso);
}

/* -------------------------------------------------------------- la pagina */
.contenuto { width: 100%; max-width: 1260px; margin: 0 auto; padding: 26px 28px 10px; }

.card {
background: var(--superficie);
border: 1px solid var(--bordo);
border-radius: var(--r-xl);
padding: 22px 24px;
margin-bottom: 18px;
box-shadow: var(--ombra-1);
}
.card-piccola { padding: 16px 20px; }

h1 {
font-size: 24px; line-height: 1.2; margin: 0 0 14px;
color: var(--verde-scuro); letter-spacing: -.02em; font-weight: 700;
}
h2 { font-size: 18px; color: var(--verde-scuro); letter-spacing: -.01em; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; color: var(--verde-scuro); }

/* Un titolo che si vede: icona nel tondino tenue, come le card del template */
.titolo-sezione {
display: flex; align-items: center; gap: 11px;
margin: 0 0 16px; padding-bottom: 12px;
border-bottom: 1px solid var(--bordo);
}
.titolo-sezione > span:first-child {
display: inline-grid; place-items: center;
width: 36px; height: 36px; flex: 0 0 auto;
background: var(--verde-chiaro); border-radius: 11px;
font-size: 17px;
}

/* Testata di pagina: titolo a sinistra, azioni a destra */
.testata-pagina {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.testata-pagina h1 { margin: 0; }
.testata-pagina .row-btn { margin: 0; }

.occhiello {
font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
color: var(--testo-tenue); font-weight: 600; margin: 0 0 3px;
}
.muted { color: var(--testo-tenue); }

/* -------------------------------------------------------------- i moduli */
label { display: block; font-weight: 500; margin: 14px 0 5px; color: var(--verde-scuro); font-size: 14px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=file], input[type=search],
input[type=time], input:not([type]), select, textarea {
width: 100%; padding: 10px 13px;
border: 1px solid var(--bordo-forte); border-radius: var(--r-s);
font-size: 15px; font-family: inherit; background: #fff; color: inherit;
transition: border-color .14s ease, box-shadow .14s ease;
}
textarea { min-height: 96px; }
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--verde);
box-shadow: 0 0 0 3px rgba(11, 107, 50, .14);
}
input::placeholder, textarea::placeholder { color: #9aa79f; }

/* ------------------------------------------------------------- i pulsanti */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 18px; border-radius: var(--r-s);
font-size: 14.5px; font-weight: 600; font-family: inherit; line-height: 1.3;
cursor: pointer; text-decoration: none; text-align: center;
border: 1px solid var(--verde);
background: var(--verde);
color: #fff;
box-shadow: 0 6px 14px -8px var(--verde-ombra);
transition: transform .1s ease, box-shadow .14s ease, filter .14s ease, background .14s ease;
}
.btn:hover { filter: brightness(1.08); box-shadow: 0 10px 20px -10px var(--verde-ombra); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-verde { }
.btn-blu { background: var(--blu); border-color: var(--blu); box-shadow: 0 6px 14px -8px rgba(47, 111, 214, .5); }
.btn-rosso { background: var(--rosso); border-color: var(--rosso); box-shadow: 0 6px 14px -8px rgba(214, 69, 69, .5); }
.btn-arancio { background: var(--arancio); border-color: var(--arancio); box-shadow: 0 6px 14px -8px rgba(238, 138, 16, .5); }
.btn-grey { background: #fff; border-color: var(--bordo-forte); color: var(--verde-scuro); box-shadow: none; }
.btn-grey:hover { background: var(--verde-tenue); border-color: var(--verde); filter: none; box-shadow: none; }
.btn-viola { background: var(--viola); border-color: var(--viola); box-shadow: 0 6px 14px -8px rgba(111, 82, 230, .5); }
.btn-ghost {
background: #fff; border-color: var(--bordo-forte);
color: var(--verde-scuro); box-shadow: none;
}
.btn-ghost:hover { background: var(--verde-tenue); filter: none; box-shadow: none; }
.btn-verde-chiaro {
background: var(--verde-chiaro); color: var(--verde-scuro);
border-color: #cfe6d6; box-shadow: none;
}
.btn-giallo { background: #f6c94a; color: #5c4600; border-color: #f6c94a; box-shadow: 0 6px 14px -8px rgba(246, 201, 74, .6); }
.btn-small { padding: 6px 12px; font-size: 13px; border-radius: var(--r-xs); gap: 6px; }

.row-btn { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.in-linea { display: inline-block; }

/* ------------------------------------------------------------- i cartellini */
.badge {
display: inline-flex; align-items: center; gap: 4px;
color: #fff; border-radius: 999px; padding: 4px 11px;
font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.3;
}
.badge-si { background: var(--verde-chiaro); color: var(--verde-scuro); }
.badge-no { background: #eceff0; color: #5b6a63; }

/* -------------------------------------------------------------- le tabelle */
table.elenco { width: 100%; border-collapse: collapse; }
table.elenco th, table.elenco td {
text-align: left; padding: 12px 10px;
border-bottom: 1px solid var(--bordo); vertical-align: top;
}
table.elenco th {
background: transparent; color: var(--testo-tenue);
font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
border-bottom: 1px solid var(--bordo-forte);
}
table.elenco tr:hover td { background: var(--verde-tenue); }
table.elenco tr:last-child td { border-bottom: none; }
.tabella-scroll { overflow-x: auto; border-radius: var(--r-s); }

/* ---------------------------------------------------------- avvisi e note */
.flash {
background: var(--verde-chiaro);
border: 1px solid #bfe3cd; border-left: 5px solid var(--verde);
color: var(--verde-scuro); border-radius: var(--r-s);
padding: 13px 18px; margin-bottom: 16px; font-weight: 500;
}
.errore {
background: var(--rosso-chiaro); border: 1px solid #f3c9c9; border-left: 5px solid var(--rosso);
color: var(--rosso-scuro); border-radius: var(--r-s);
padding: 13px 18px; margin-bottom: 16px; font-weight: 500;
}
.nota-box {
background: var(--giallo-chiaro); border: 1px solid #f0dc9a; border-left: 5px solid #e8c766;
border-radius: var(--r-s); padding: 16px 18px; margin: 12px 0;
}
.nota-box h3 { margin: 0 0 8px; color: var(--verde-scuro); }
.nota-box h4 {
font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase;
color: #8a7a30; margin: 15px 0 6px;
}
.nota-box ul { margin: 0; padding-left: 20px; }
.nota-box li { margin-bottom: 6px; }
.regola-no {
border-left: 5px solid var(--rosso); background: var(--rosso-chiaro); color: #5c1a1a;
border-radius: 0 var(--r-s) var(--r-s) 0; padding: 12px 14px; margin: 12px 0;
}
.regola-no b { color: var(--rosso); }
.avviso-riparazione {
background: var(--arancio-chiaro); border: 1px solid #f3d3a4; border-left: 5px solid var(--arancio);
border-radius: var(--r-s); padding: 12px 16px; margin-top: 16px;
color: #7a4a05; font-size: 14px;
}

.notifica-preventivi {
background: var(--viola-chiaro);
border-bottom: 3px solid var(--viola); color: var(--viola-scuro);
padding: 12px 24px; font-size: 14.5px; position: relative; z-index: 30;
}
.notifica-preventivi a { color: var(--viola-scuro); font-weight: 600; }

.fondo {
text-align: center; color: #8a9a8f; font-size: 12.5px; padding: 26px 16px 36px;
margin-top: auto;
}

/* --------------------------------------------------------------- griglie */
.griglia2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .griglia2 { grid-template-columns: 1fr; } }
.home-griglia {
display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 18px; align-items: start;
}

.foto-mini {
max-width: 170px; max-height: 128px; border-radius: var(--r-s);
border: 1px solid var(--bordo); box-shadow: var(--ombra-1);
}
.filtri { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filtri > div { min-width: 165px; }
.filtri label { margin-top: 0; }

/* ------------------------------------------------------------------ login */
.login-box { max-width: 440px; margin: 40px auto; box-shadow: var(--ombra-2); padding: 30px 32px; }
.login-testa { text-align: center; margin-bottom: 6px; }
.login-testa img { max-height: 96px; max-width: 300px; }
.login-testa .ht-emblema { font-size: 46px; line-height: 1; }
.login-box h1 { text-align: center; margin-top: 10px; }
.login-aiuto {
text-align: center; margin: 16px 0 0; padding-top: 14px;
border-top: 1px solid var(--bordo); font-size: 14px;
}
.login-aiuto a { font-weight: 500; }
body.senza-menu .app-corpo { min-height: 100vh; }
body.senza-menu .contenuto { max-width: 1120px; }

/* L'occhio per vedere la password. Il guscio è un blocco: dentro un modulo
in flex (scheda cliente) si stringe da sé sulla larghezza del campo. */
.campo-password { position: relative; display: block; }
.campo-password > input { width: 100%; padding-right: 46px; }
.occhio {
position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; padding: 0; line-height: 1;
display: grid; place-items: center;
background: transparent; border: 1px solid transparent; border-radius: 8px;
font-size: 18px; cursor: pointer; opacity: .6;
transition: opacity .12s ease, background .12s ease;
}
.occhio:hover { opacity: 1; background: var(--verde-chiaro); }
.occhio:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; opacity: 1; }
.occhio.acceso { opacity: 1; background: var(--verde-chiaro); border-color: var(--bordo-forte); }
.storia { font-size: 14px; color: var(--testo-tenue); }
.storia li { margin-bottom: 5px; }

details.accordeon {
border: 1px solid var(--bordo); border-radius: var(--r);
margin-bottom: 10px; background: #fff;
overflow: hidden;
}
details.accordeon summary {
cursor: pointer; padding: 14px 18px; font-weight: 600;
color: var(--verde-scuro); font-size: 15.5px;
}
details.accordeon summary:hover { background: var(--verde-tenue); }
details.accordeon > div { padding: 0 18px 16px; }

.gps-ok { color: var(--verde-vivo); font-weight: 600; }
.gps-no { color: var(--rosso); font-weight: 600; }
.mono { font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fonte-scheda { border-top: 1px solid var(--bordo); margin-top: 15px; padding-top: 11px; font-size: 13px; color: var(--testo-tenue); }

/* --------------------------------------- selettore segnalazione/sopralluogo */
.seg { display: flex; gap: 11px; margin-bottom: 18px; flex-wrap: wrap; }
.seg a, .seg button {
flex: 1 1 200px; text-align: center; text-decoration: none; cursor: pointer;
background: #fff; color: var(--testo); font-family: inherit;
border: 1px solid var(--bordo-forte); border-radius: var(--r);
padding: 13px 14px; font-weight: 600; font-size: 14.5px;
transition: transform .1s ease, box-shadow .14s ease, border-color .14s ease;
}
.seg a:hover, .seg button:hover { box-shadow: var(--ombra-2); border-color: var(--verde); }
.seg a small, .seg button small {
display: block; margin-top: 4px; font-weight: 400; font-size: 12px; opacity: .75;
}
.seg a.attivo, .seg button.attivo {
background: var(--verde); color: #fff; border-color: var(--verde);
box-shadow: 0 10px 20px -10px var(--verde-ombra); transform: none;
}
.seg-tipo { margin-bottom: 8px; }

/* ==========================================================================
LA HOME — il cruscotto
========================================================================== */
.hero {
display: grid; grid-template-columns: auto 1fr auto;
gap: 22px; align-items: center;
background: var(--superficie);
border: 1px solid var(--bordo); border-radius: var(--r-xl);
padding: 20px 26px; margin-bottom: 18px;
box-shadow: var(--ombra-1);
position: relative; overflow: hidden;
}
.hero::before {
content: ""; position: absolute; left: -60px; top: -80px; width: 260px; height: 260px;
border-radius: 50%; background: radial-gradient(closest-side, var(--verde-chiaro), transparent);
pointer-events: none;
}
.hero > * { position: relative; }
.hero-marchio img { max-height: 84px; max-width: 300px; display: block; }
.hero-marchio .ht-emblema { font-size: 52px; line-height: 1; }
.hero-saluto h1 { margin: 0 0 3px; font-size: 24px; }
.hero-ruolo { margin: 0; color: var(--testo-tenue); font-size: 14px; font-weight: 500; }
.hero-meteo { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* col menu a sinistra il meteo sta gia' nella testata: nell'hero non si ripete */
body.con-menu .hero-meteo .mm-meteo { display: none; }
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 14px; }
.hero-meteo { align-items: center; }
}

/* riquadro data + meteo */
.data-meteo {
background: var(--grigio); border: 1px solid var(--bordo); border-radius: var(--r);
padding: 12px 18px; min-width: 236px; text-align: right;
}
.dm-data { font-weight: 600; color: var(--verde-scuro); font-size: 14px; }
.dm-meteo { display: flex; gap: 9px; align-items: center; justify-content: flex-end; margin-top: 6px; font-size: 15px; }
.dm-icona { font-size: 28px; }
.dm-testo b { font-size: 22px; color: var(--verde-scuro); font-weight: 700; }
.dm-luogo { font-size: 12.5px; color: var(--testo-tenue); margin-top: 5px; }
.data-meteo.esteso { text-align: left; min-width: 0; }
.data-meteo.esteso .dm-meteo { justify-content: flex-start; }
@media (max-width: 900px) { .data-meteo { text-align: center; } .dm-meteo { justify-content: center; } }

/* azioni rapide */
.box-azioni .azioni-riga {
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 13px;
}
.btn-azione {
justify-content: flex-start; text-align: left;
padding: 14px 18px; font-size: 15px; border-radius: var(--r);
}
.btn-azione small { display: block; font-weight: 400; font-size: 12.5px; opacity: .88; margin-top: 3px; }
.ba-icona {
font-size: 22px; flex: 0 0 auto;
display: inline-grid; place-items: center;
width: 40px; height: 40px; border-radius: 11px;
background: rgba(255, 255, 255, .2);
}

/* tessere "Da fare": come le card-statistica del template, con la macchia
pastello in alto a sinistra e l'icona nel tondino a destra */
.tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tessere-mini { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 16px; }
.tessera {
--tono: var(--verde-vivo); --tono-chiaro: var(--verde-chiaro);
position: relative; overflow: hidden;
display: grid; grid-template-areas: "etichetta icona" "numero icona" "nota nota";
grid-template-columns: 1fr auto; align-items: start; gap: 2px 10px;
background: #fff; border: 1px solid var(--bordo); border-radius: 16px;
padding: 16px 18px; text-decoration: none; color: var(--testo);
box-shadow: var(--ombra-1);
transition: transform .11s ease, box-shadow .14s ease;
}
.tessera::before {
content: ""; position: absolute; left: -46px; top: -46px; width: 150px; height: 150px;
border-radius: 50%; background: radial-gradient(closest-side, var(--tono-chiaro), transparent);
pointer-events: none;
}
.tessera > * { position: relative; }
a.tessera:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
.tz-icona {
grid-area: icona; display: grid; place-items: center;
width: 40px; height: 40px; border-radius: 50%;
background: var(--tono-chiaro); font-size: 19px; line-height: 1;
}
.tz-numero {
grid-area: numero; text-align: left; font-size: 30px; font-weight: 700;
line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
color: var(--testo); margin-top: 2px;
}
.tz-etichetta { grid-area: etichetta; font-size: 13.5px; font-weight: 600; color: var(--tono); line-height: 1.3; }
.tz-nota { grid-area: nota; font-size: 12px; color: var(--testo-tenue); font-weight: 500; margin-top: 4px; }
.tessera-verde { --tono: var(--verde-vivo); --tono-chiaro: var(--verde-chiaro); }
.tessera-blu { --tono: var(--blu); --tono-chiaro: var(--blu-chiaro); }
.tessera-arancio { --tono: var(--arancio); --tono-chiaro: var(--arancio-chiaro); }
.tessera-rosso { --tono: var(--rosso); --tono-chiaro: var(--rosso-chiaro); }
.tessera-viola { --tono: var(--viola); --tono-chiaro: var(--viola-chiaro); }
.tessera-vuota { --tono: var(--testo-tenue); --tono-chiaro: #f1f4f2; }
.tessera-vuota .tz-numero { color: #aab5ae; }
.tessera-vuota::before { opacity: .6; }
/* le liste della home */
.lista-home { list-style: none; margin: 0; padding: 0; }
.lista-home li {
display: flex; gap: 12px; align-items: center; justify-content: space-between;
padding: 11px 0; border-bottom: 1px solid var(--bordo);
}
.lista-home li:last-child { border-bottom: none; }
.lista-home a { text-decoration: none; color: var(--testo); display: block; min-width: 0; flex: 1 1 auto; }
.lista-home a:hover .lh-titolo { color: var(--verde); }
.lh-data { display: block; font-size: 11.5px; color: #8b9a8f; letter-spacing: .02em; }
.lh-titolo { display: block; font-weight: 600; font-size: 14.5px; }
.lh-meta { display: block; font-size: 13px; color: var(--testo-tenue); }
.lista-compatta { margin-top: 14px; border-top: 1px solid var(--bordo); }
.totale-ore { border-top: 2px solid var(--verde); padding-top: 11px; color: var(--verde-scuro); }

/* avanzamento a segmenti (segnalazioni e sopralluoghi) */
.avanzamento, .sop-avanzamento { display: flex; gap: 4px; margin-top: 9px; }
.avanzamento i, .sop-avanzamento i {
display: block; flex: 1; height: 6px; border-radius: 3px; background: #e3ebe5;
}
.avanzamento i.on, .sop-avanzamento i.on { background: var(--verde-vivo); }

/* linguette di filtro */
.linguette { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.linguette a {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px; border-radius: 999px;
background: #fff; border: 1px solid var(--bordo-forte);
color: var(--testo-tenue); text-decoration: none; font-weight: 500; font-size: 13.5px;
}
.linguette a:hover { border-color: var(--verde); color: var(--verde-scuro); }
.linguette a.attiva {
background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600;
}
.lg-n {
background: var(--verde-chiaro); color: var(--verde-scuro);
border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 700;
}
.linguette a.attiva .lg-n { background: rgba(255, 255, 255, .25); color: #fff; }

/* ---------------------------------------------------------------- timeline */
.timeline { list-style: none; margin: 0 0 18px; padding: 0; }
.timeline li { display: grid; grid-template-columns: 28px 1fr; gap: 11px; padding-bottom: 17px; position: relative; }
.timeline li:not(:last-child)::before {
content: ""; position: absolute; left: 13px; top: 27px; bottom: 0; width: 2px; background: var(--bordo);
}
.timeline .dot {
width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
font-size: 12px; font-weight: 700; background: #fff; color: #9aa89e; border: 1px solid var(--bordo-forte);
}
.timeline .dot.on { background: var(--verde); color: #fff; border-color: var(--verde); }
.tl-label { font-weight: 600; font-size: 14.5px; }
.tl-date { font-size: 13px; color: var(--testo-tenue); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 14.5px; margin: 0 0 17px; }
.kv dt { color: var(--testo-tenue); font-size: 13px; }
.kv dd { margin: 0; }

/* ==========================================================================
STATISTICHE — stesse tessere del cruscotto
========================================================================== */
.stat-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; }
.stat {
position: relative; overflow: hidden;
background: #fff;
border: 1px solid var(--bordo); border-radius: 16px;
padding: 16px 18px; box-shadow: var(--ombra-1);
}
.stat::before {
content: ""; position: absolute; left: -46px; top: -46px; width: 150px; height: 150px;
border-radius: 50%; background: radial-gradient(closest-side, var(--verde-chiaro), transparent);
pointer-events: none;
}
.stat > * { position: relative; }
.st-numero {
font-size: 28px; font-weight: 700; color: var(--testo);
line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.st-numero small { font-size: 14px; font-weight: 600; color: var(--testo-tenue); }
.st-etichetta { font-size: 13.5px; color: var(--verde); font-weight: 600; margin-top: 6px; }
.st-nota { font-size: 12px; color: var(--testo-tenue); margin-top: 3px; }

/* barre orizzontali: l'etichetta a sinistra, la barra che cresce a destra */
.barre { display: flex; flex-direction: column; gap: 9px; }
.barra { display: grid; grid-template-columns: minmax(120px, 30%) 1fr auto; gap: 12px; align-items: center; }
.ba-nome { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-solco { display: block; background: #e8eeea; border-radius: 999px; height: 12px; overflow: hidden; }
.ba-riemp {
display: block; /* è uno <span>: senza questo l'altezza non si applica */
height: 100%; border-radius: 999px; min-width: 3px;
background: var(--verde-vivo);
}
.ba-riemp.blu { background: var(--blu); }
.ba-riemp.arancio { background: var(--arancio); }
.ba-riemp.viola { background: var(--viola); }
.ba-riemp.rosso { background: var(--rosso); }
.ba-valore { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--verde-scuro); min-width: 62px; text-align: right; }
@media (max-width: 620px) {
.barra { grid-template-columns: 1fr auto; }
.ba-solco { grid-column: 1 / -1; }
}