/* ==========================================================================
   Verde in Comune — foglio di stile v3.0 "cruscotto"
   La Palma Opere del Verde S.r.l.

   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; }

/* ==========================================================================
   LA BARRA IN BASSO — solo sul telefono
   Le funzioni principali sotto il pollice, come in un'app. Sotto i 700px
   sta subito sotto la testata; il menu completo resta nel pannello che si
   apre col tasto in alto a sinistra.
   ========================================================================== */
.barra-basso { display: none; }

@media (max-width: 700px) {
  .barra-basso {
    display: flex; align-items: stretch;
    position: sticky; top: var(--topbar-h); z-index: 30;
    background: #fff; border-bottom: 1px solid var(--bordo);
    box-shadow: 0 6px 22px -10px rgba(12, 38, 20, .30);
    padding: 5px 4px;
  }
  .bb-voce, .bb-altro > summary {
    flex: 1 1 0; min-width: 0; list-style: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 5px 2px; border-radius: 12px;
    text-decoration: none; color: var(--testo-nav);
    font-size: 11px; font-weight: 600; letter-spacing: -.01em;
    -webkit-tap-highlight-color: transparent;
  }
  .bb-altro { flex: 1 1 0; min-width: 0; }
  .bb-altro > summary::-webkit-details-marker { display: none; }
  .bb-icona {
    position: relative; font-size: 21px; line-height: 1;
    display: grid; place-items: center;
    width: 46px; height: 28px; border-radius: 999px;
    transition: background .14s ease;
  }
  .bb-icona svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .bb-testo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bb-voce:active .bb-icona, .bb-altro > summary:active .bb-icona { background: var(--verde-chiaro); }

  .bb-voce.attiva, .bb-altro.attiva > summary, .bb-altro[open] > summary { color: var(--verde-scuro); }
  .bb-voce.attiva .bb-icona,
  .bb-altro.attiva > summary .bb-icona,
  .bb-altro[open] > summary .bb-icona {
    background: var(--verde); color: #fff;
  }

  .bb-pallino {
    position: absolute; top: -5px; right: 2px;
    min-width: 17px; padding: 1px 4px; border-radius: 999px;
    background: var(--rosso); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1.4;
    border: 2px solid #fff;
  }

  /* il pannello "Altro": scende dalla barra, sopra una velatura scura */
  .bb-velo {
    display: block; position: absolute; left: 0; right: 0;
    top: 100%; height: 100vh;
    background: rgba(10, 25, 15, .38);
  }
  .bb-foglio {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--bordo);
    border-radius: 0 0 18px 18px; box-shadow: var(--ombra-3);
    padding: 14px 12px; max-height: 62vh; overflow-y: auto;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  }
  .bb-foglio a {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-align: center;
    padding: 12px 6px; border-radius: var(--r);
    background: var(--verde-tenue); border: 1px solid var(--bordo);
    text-decoration: none; color: var(--testo);
    font-size: 12px; font-weight: 600; line-height: 1.25;
  }
  .bb-foglio a.attiva { background: var(--verde); border-color: var(--verde-scuro); color: #fff; }
  .bb-foglio a .pallino { position: absolute; top: 6px; right: 6px; }
  .bf-icona { font-size: 22px; line-height: 1; display: grid; place-items: center; }
  .bf-icona svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .bf-testo { max-width: 100%; }
}

@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; }

/* i tre tasti grandi dell'operaio: si prendono col pollice */
.card-oggi { border: 1px solid #bfe3cd; box-shadow: var(--ombra-2); }
.tasti-grandi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.tasto-grande {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; text-align: center; text-decoration: none;
  min-height: 132px; padding: 18px 14px; border-radius: var(--r);
  color: #fff; border: 0;
  box-shadow: var(--ombra-2);
  transition: transform .11s ease, box-shadow .14s ease, filter .14s ease;
}
.tasto-grande:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: var(--ombra-3); }
.tasto-grande:active { transform: translateY(1px); }
.tg-icona { font-size: 38px; line-height: 1; }
.tg-testo { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.tg-nota { font-size: 12.5px; opacity: .9; font-weight: 500; }
.tg-verde   { background: linear-gradient(160deg, var(--verde-vivo), var(--verde)); }
.tg-blu     { background: linear-gradient(160deg, #4a8be6, var(--blu-scuro)); }
.tg-arancio { background: linear-gradient(160deg, #f5a33a, var(--arancio-scuro)); }

/* 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); }

/* i compiti dell'operaio */
.compiti { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 13px; }
.compito {
  border: 1px solid var(--bordo); border-radius: var(--r); padding: 14px 16px;
  background: #fff;
  box-shadow: var(--ombra-1);
}
.co-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.co-titolo { font-weight: 600; text-decoration: none; color: var(--verde-scuro); font-size: 15px; }
.co-meta { font-size: 13px; color: var(--testo-tenue); margin-top: 3px; }
.co-foto { display: flex; gap: 9px; align-items: center; margin-top: 11px; flex-wrap: wrap; }
.co-scatta {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; cursor: pointer;
  background: #fff; border: 1px dashed var(--bordo-forte); border-radius: var(--r-xs);
  padding: 7px 13px; font-size: 13.5px; font-weight: 500; color: var(--verde-scuro);
}
.co-scatta:hover { border-color: var(--verde); background: var(--verde-chiaro); }
.co-scatta input[type=file] { display: none; }

/* 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; }

/* --------------------------------------------------------- banner delle news */
.news-banner {
  background: var(--superficie);
  border: 1px solid #bfe3cd; border-radius: var(--r-xl);
  padding: 22px 26px; margin-bottom: 18px; text-align: center;
  box-shadow: var(--ombra-2);
  position: relative; overflow: hidden;
}
.news-banner::before {
  content: ""; position: absolute; right: -70px; top: -90px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(closest-side, var(--verde-chiaro), transparent);
}
.news-banner > * { position: relative; }
.nb-etichetta {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--verde);
}
.news-banner h2 { font-size: 21px; margin: 7px 0 11px; color: var(--verde-scuro); }
.nb-testo { font-size: 15px; max-width: 70ch; margin: 0 auto; text-align: left; }
.nb-firma { margin-top: 13px; font-size: 13px; color: var(--testo-tenue); }

.scelta-clienti {
  border: 1px solid var(--bordo); border-radius: var(--r-s); padding: 13px 15px;
  max-height: 280px; overflow-y: auto; background: #fff;
}
.cliente-riga { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; font-weight: 400; }
.cliente-riga input { width: auto; }

/* ------------------------------------------------------------------- meteo */
.meteo-ora { margin-bottom: 18px; }
.prev-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 11px; }
.prev-giorno {
  background: #fff;
  border: 1px solid var(--bordo); border-radius: var(--r);
  padding: 13px 9px; text-align: center; box-shadow: var(--ombra-1);
}
.pg-data { font-weight: 600; font-size: 13px; color: var(--verde-scuro); }
.pg-icona { font-size: 32px; line-height: 1.3; }
.pg-desc { font-size: 12px; color: var(--testo-tenue); min-height: 30px; }
.pg-temp { font-size: 15px; margin-top: 4px; }
.pg-temp b { color: var(--verde-scuro); }
.pg-extra { font-size: 11.5px; color: var(--testo-tenue); margin-top: 4px; }

/* ------------------------------------------------------- schede sopralluoghi */
.sop-lista { display: flex; flex-direction: column; gap: 11px; }
.sop-item {
  display: flex; flex-direction: column; gap: 5px;
  text-decoration: none; color: var(--testo);
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--ombra-1);
  transition: transform .1s ease, box-shadow .14s ease, border-color .14s ease;
}
.sop-item:hover { border-color: var(--verde); box-shadow: var(--ombra-2); transform: translateY(-1px); }
.sop-top { display: flex; justify-content: space-between; align-items: center; gap: 9px; }
.sop-code { font-size: 13px; color: var(--testo-tenue); font-weight: 600; }
.sop-titolo { font-weight: 600; font-size: 15.5px; }
.sop-meta { display: flex; gap: 13px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--testo-tenue); }

/* ---------------------------------------------------------------- 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; }

/* ------------------------------------------------------------ stima dei costi */
.stima-tab { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.stima-tab th {
  text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--testo-tenue); background: transparent; padding: 9px;
  border-bottom: 1px solid var(--bordo-forte); font-weight: 600;
}
.stima-tab td { padding: 7px 9px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.stima-tab select, .stima-tab input { padding: 8px; font-size: 14.5px; }
.stima-totali {
  background: var(--grigio);
  border: 1px solid var(--bordo); border-radius: var(--r);
  padding: 14px 18px; margin-top: 14px; max-width: 430px; margin-left: auto;
}
.riga-tot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; }
.riga-tot.totale {
  border-top: 2px solid var(--verde); margin-top: 7px; padding-top: 11px;
  font-size: 18px; font-weight: 700; color: var(--verde-scuro);
}
.riga-tot .inline { display: flex; align-items: center; gap: 6px; font-weight: 500; margin: 0; }
.riga-tot .inline input { width: 74px; padding: 5px 7px; }
.stima-mini th, .stima-mini td { font-size: 13.5px; padding: 6px; }

.box-chiusura { border: 1px solid #bfe3cd; box-shadow: var(--ombra-2); }
.box-chiusura h2 { margin-top: 0; }

/* ==========================================================================
   MAGAZZINO E RAPPORTINI
   ========================================================================== */
/* Dove sta il materiale si vede dal colore della riga:
   rosso = in cantiere, arancione = dal meccanico. */
.riga-cantiere { background: var(--rosso-chiaro); }
.riga-cantiere td { border-top: 1px solid #f3c9c4; }
.riga-cantiere strong { color: var(--rosso-scuro); }
.riga-riparazione { background: var(--arancio-chiaro); }
.riga-riparazione td { border-top: 1px solid #f0d3a3; }
.riga-riparazione strong { color: var(--arancio-scuro); }
.riga-fuori { background: var(--rosso-chiaro); }          /* nome storico, tenuto per compatibilità */
.riga-fuori strong { color: var(--rosso-scuro); }
table.elenco tr.riga-cantiere:hover td,
table.elenco tr.riga-fuori:hover td { background: #fbe4e1; }
table.elenco tr.riga-riparazione:hover td { background: #ffefd8; }

/* elenco a spunta del materiale: comodo col pollice, in cantiere */
.spunte { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.spunta {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px;
  border: 1px solid var(--bordo-forte); border-radius: var(--r-xs);
  background: #fff; font-size: 14.5px; cursor: pointer; font-weight: 500;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.spunta:hover { border-color: var(--verde); box-shadow: var(--ombra-1); }
.spunta input { width: auto; margin: 0; transform: scale(1.35); accent-color: var(--verde); }
.spunta-inline {
  display: flex; align-items: center; gap: 7px; margin: 7px 0;
  font-weight: 400; font-size: 14px; color: var(--testo-tenue);
}
.spunta-inline input { width: auto; accent-color: var(--verde); }
input[type=checkbox], input[type=radio] { accent-color: var(--verde); }

.blocco-lavoro { padding: 14px 0; border-top: 1px solid var(--bordo); }
.blocco-lavoro:first-of-type { border-top: 0; padding-top: 0; }

/* azioni dentro le celle della tabella */
.celle-azioni { white-space: nowrap; }
.celle-azioni > * { vertical-align: top; }
details.azione-inline { display: inline-block; position: relative; }
details.azione-inline > summary { list-style: none; display: inline-flex; }
details.azione-inline > summary::-webkit-details-marker { display: none; }
details.azione-inline > form {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0;
  min-width: 268px; background: #fff; border: 1px solid var(--bordo);
  border-radius: var(--r); padding: 13px; box-shadow: var(--ombra-3);
  white-space: normal;
}
.riga-meccanico { display: flex; gap: 7px; align-items: center; }
.riga-meccanico input { flex: 1 1 auto; }

/* ==========================================================================
   TIMBRATURE
   ========================================================================== */
.card-timbra { border: 1px solid #bfe3cd; box-shadow: var(--ombra-2); }

/* la pallina che dice se sei dentro o fuori */
.stato-turno {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500;
  background: var(--grigio); border: 1px solid var(--bordo-forte); color: var(--testo-tenue);
}
.stato-turno .st-pallino {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: #9aa89e;
}
.stato-turno.dentro {
  background: var(--verde-chiaro); border-color: #bfe3cd; color: var(--verde-scuro);
}
.stato-turno.dentro .st-pallino {
  background: var(--verde-vivo); box-shadow: 0 0 0 4px rgba(31, 170, 111, .2);
}

/* la spunta della geolocalizzazione: è una scelta, e si deve vedere che lo è */
.spunta-geo {
  align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 4px 0 16px;
  border: 1px dashed var(--bordo-forte); background: var(--verde-tenue);
  border-radius: var(--r); font-weight: 400;
}
.spunta-geo:hover { border-color: var(--verde); }
.spunta-geo input { margin-top: 2px; }
.spunta-geo strong { display: block; font-size: 15px; color: var(--verde-scuro); }
.spunta-geo small { display: block; margin-top: 3px; font-size: 13px; color: var(--testo-tenue); line-height: 1.4; }
.spunta-geo:has(input:checked) { border-style: solid; border-color: var(--verde); background: var(--verde-chiaro); }

/* i due tasti grossi: si devono poter premere di corsa, con i guanti */
.tasti-timbro { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .tasti-timbro { grid-template-columns: 1fr; } }
.tasto-timbro {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 128px; padding: 18px 14px;
  border-radius: var(--r); border: 0;
  font-family: inherit; color: #fff; cursor: pointer;
  box-shadow: var(--ombra-2);
  transition: transform .1s ease, filter .14s ease, box-shadow .14s ease;
}
.tasto-timbro:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); box-shadow: var(--ombra-3); }
.tasto-timbro:active:not(:disabled) { transform: translateY(1px); }
.tasto-timbro:disabled {
  background: var(--grigio) !important; color: #9aa89e; border: 1px solid var(--bordo);
  box-shadow: none; cursor: not-allowed;
}
.tt-icona { font-size: 34px; line-height: 1; }
.tt-testo { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.tt-nota { font-size: 12.5px; opacity: .9; font-weight: 500; }
.tt-ingresso { background: linear-gradient(160deg, var(--verde-vivo), var(--verde)); }
.tt-uscita   { background: linear-gradient(160deg, #e06060, var(--rosso-scuro)); }

.geo-stato {
  margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-s);
  font-size: 14px; font-weight: 500;
}
.geo-stato.attesa { background: var(--verde-chiaro); color: var(--verde-scuro); }
.geo-stato.ok     { background: var(--verde-chiaro); color: var(--verde-scuro); }
.geo-stato.guaio  { background: var(--arancio-chiaro); color: var(--arancio-scuro); }

.riepilogo-ore {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordo);
}
.riepilogo-ore > div { text-align: center; }
.ro-numero {
  display: block; font-size: 28px; font-weight: 700; color: var(--verde-scuro);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.ro-etichetta { display: block; font-size: 13px; color: var(--testo-tenue); font-weight: 500; margin-top: 3px; }

/* la striscia sulla home dell'operaio */
.striscia-timbro {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 16px 20px;
  border-left: 5px solid var(--bordo-forte);
}
.striscia-timbro.dentro { border-left-color: var(--verde-vivo); background: var(--verde-tenue); }
.striscia-timbro.fuori  { border-left-color: var(--arancio); }
.sr-stato { display: flex; align-items: center; gap: 12px; }
.sr-stato .st-pallino { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; background: var(--arancio); }
.striscia-timbro.dentro .st-pallino { background: var(--verde-vivo); box-shadow: 0 0 0 4px rgba(31, 170, 111, .2); }
.sr-stato strong { display: block; font-size: 15.5px; color: var(--verde-scuro); }
.sr-stato small { display: block; font-size: 13px; color: var(--testo-tenue); }

/* chi ha dimenticato di uscire */
.compito-allarme { border-color: #f3c9c9; background: var(--rosso-chiaro); }

/* ==========================================================================
   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; }
}

/* colonne mensili */
.colonne {
  display: flex; align-items: flex-end; gap: 6px;
  height: 190px; padding: 10px 0 0;
  border-bottom: 1px solid var(--bordo-forte); overflow-x: auto;
}
.colonna { flex: 1 1 0; min-width: 34px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 5px; }
.co-valore { font-size: 12px; font-weight: 600; color: var(--verde-scuro); font-variant-numeric: tabular-nums; }
.co-asta {
  width: 100%; border-radius: 7px 7px 0 0; min-height: 3px;
  background: linear-gradient(180deg, var(--verde-vivo), var(--verde));
}
.co-asta.spenta { background: #e3ebe5; }
.colonne-etichette { display: flex; gap: 6px; margin-top: 7px; overflow-x: auto; }
.colonne-etichette span {
  flex: 1 1 0; min-width: 34px; text-align: center;
  font-size: 11px; color: var(--testo-tenue); font-weight: 500;
}

/* anello di proporzione (conic-gradient: niente librerie, niente script) */
.anelli { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; align-items: center; }
.anello { display: flex; align-items: center; gap: 16px; }
.an-disco {
  width: 108px; height: 108px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
}
.an-buco {
  width: 74px; height: 74px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; text-align: center; line-height: 1.15;
}
.an-perc { font-size: 20px; font-weight: 700; color: var(--verde-scuro); }
.an-legenda { font-size: 13.5px; }
.an-voce { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.an-punto { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }

/* curiosità */
.curiosita { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 13px; }
.curiosa {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--ombra-1);
}
.cu-icona {
  font-size: 22px; line-height: 1; flex: 0 0 auto;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--verde-chiaro);
}
.cu-titolo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--testo-tenue); font-weight: 600; }
.cu-valore { font-weight: 600; font-size: 15.5px; color: var(--verde-scuro); margin-top: 2px; }
.cu-nota { font-size: 13px; color: var(--testo-tenue); margin-top: 2px; }

/* ==========================================================================
   LA GIORNATA DELL'OPERAIO
   Le quattro tessere grandi in cima a ogni pagina. Il disegno è l'immagine
   preparata dall'azienda, in due versioni: a colori quando il tasto si può
   premere, in bianco e nero quando no. Le tessere spente sono <span>, non
   link: non si cliccano nemmeno da tastiera.
   ========================================================================== */
.pulsantiera {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--r-xl);
  padding: 6px;
  box-shadow: var(--ombra-1);
  margin: 0 0 20px;
}
.pg {
  display: block; border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: inherit;
}
.pg-img { display: block; width: 100%; height: auto; }
a.pg { transition: transform .12s ease; }
a.pg:hover { transform: translateY(-2px); }
a.pg:active { transform: none; }
.pg.spento { cursor: not-allowed; }
.pg.qui { box-shadow: 0 0 0 2px var(--verde) inset; }

/* il disegno di riserva, se l'immagine non c'è */
.pg-disco { display: grid; place-items: center; width: 72px; height: 72px;
            border-radius: 50%; background: #f1f2f1; margin: 10px auto 8px; }
.pg-svg { display: block; width: 48px; height: 48px; color: #23272a; }
.pg-nome { display: block; text-align: center; font-size: 11.5px; font-weight: 700;
           letter-spacing: .04em; color: #23272a; }
.pg-riga { display: block; width: 24px; height: 3px; border-radius: 2px;
           background: currentColor; opacity: .5; margin: 7px auto 10px; }
/* I tasti che adesso non si possono premere: icona e scritta grigio medio,
   così si capisce a colpo d'occhio che sono spenti. */
.pg.spento .pg-img { filter: grayscale(1); opacity: .42; }
.pg.spento .pg-disco, .pg.spento .pg-svg, .pg.spento .pg-nome { filter: grayscale(1); opacity: .5; }
.pg.spento .pg-svg, .pg.spento .pg-nome { color: #8b9096; }

/* --------------------------------- la striscia con lo stato della giornata */
.striscia-giornata {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 16px 20px;
  border-left: 5px solid var(--bordo-forte);
}
.striscia-giornata.dentro { border-left-color: var(--verde-vivo); background: var(--verde-tenue); }
.striscia-giornata.fuori  { border-left-color: var(--bordo-forte); }
.sg-stato { display: flex; align-items: center; gap: 12px; }
.sg-stato .st-pallino { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; background: var(--bordo-forte); }
.striscia-giornata.dentro .st-pallino { background: var(--verde-vivo); box-shadow: 0 0 0 4px rgba(31, 170, 111, .2); }
.sg-stato strong { display: block; font-size: 15.5px; color: var(--verde-scuro); }
.sg-stato small  { display: block; font-size: 13px; color: var(--testo-tenue); }

/* ------------------------------------ l'elenco dei lavori che ha in mano */
.lista-lavori { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.lista-lavori li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: #fff;
  border: 1px solid var(--bordo); border-radius: var(--r-s);
}
.lista-lavori li.fatto { background: var(--verde-tenue); border-color: #cfe6d6; }
.ll-segno  { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.ll-testo  { flex: 1 1 auto; min-width: 0; }
.ll-titolo { display: block; font-weight: 600; color: var(--verde-scuro); }
.ll-nota   { display: block; font-size: 13px; color: var(--testo-tenue);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lista-home li.lh-totale { font-weight: 600; background: var(--verde-tenue); }

/* il tasto grande "CHIUDI LAVORO" */
.btn.btn-grande {
  display: inline-flex; justify-content: center; width: 100%;
  font-size: 16px; letter-spacing: .04em; padding: 15px 22px;
}

/* le spunte per assegnare un lavoro agli operai (scheda del lavoro) */
.spunte-operai {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin: 12px 0;
}

/* ------------------------------------------- il piede: calendario e anagrafica */
.scorciatoie {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--r-xl);
  padding: 8px 18px 8px 8px; box-shadow: var(--ombra-1);
  margin: 16px 0 4px;
}
.sc { display: flex; align-items: center; gap: 10px; text-decoration: none;
      color: var(--verde-scuro); font-weight: 600; }
.sc-img { display: block; width: 76px; height: auto; border-radius: var(--r-s); }
.sc-ripiego { display: grid; place-items: center; width: 56px; height: 56px;
              font-size: 26px; background: var(--verde-tenue); border-radius: var(--r-s); }
.sc-nome { font-size: 17px; }
.sc:hover .sc-nome { text-decoration: underline; }

/* ============================================================== CALENDARIO
   Le celle sono quadretti con il bordo, come il calendario mensile del
   template "consultation": i giorni con qualcosa dentro si colorano di verde. */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 18px 0 14px; }
.cal-testa {
  text-align: center; padding: 4px 0; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--testo-tenue);
}
.cal-cella {
  min-height: 70px; padding: 6px 7px; background: #fbfcfb;
  border: 1px solid var(--bordo-forte); border-radius: var(--r-xs);
  display: flex; flex-direction: column; gap: 2px;
}
.cal-fuori   { background: transparent; border-color: transparent; min-height: 0; }
.cal-festivo { background: var(--grigio); }
.cal-pieno   { background: var(--verde-chiaro); border-color: #cfe6d6; }
.cal-oggi    { border-color: var(--verde); box-shadow: 0 0 0 2px var(--verde) inset; }
.cal-numero  { font-weight: 600; font-size: 14px; color: var(--verde-scuro); }
.cal-ore     { font-size: 12px; font-weight: 600; color: var(--verde); }
.cal-lavori  { font-size: 11px; color: var(--testo-tenue); }

/* ==========================================================================
   RELEASE 3
   ========================================================================== */

/* Il marchio con il meteo di fianco, in cima alla home dell'operaio.
   Sta stretto apposta: sotto ci sono i quattro tasti, che sono la cosa
   importante della pagina. */
.marchio-meteo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff;
  border: 1px solid var(--bordo); border-radius: var(--r-xl);
  padding: 12px 18px; margin-bottom: 14px; box-shadow: var(--ombra-1);
}
.mm-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mm-logo img { max-height: 58px; max-width: 240px; display: block; }
.mm-logo .leaf-grande { font-size: 34px; line-height: 1; }
.mm-logo strong { color: var(--verde-scuro); font-size: 16px; }
.mm-meteo { text-decoration: none; flex: 0 0 auto; }
.mm-meteo .data-meteo {
  min-width: 0; padding: 8px 12px; box-shadow: none; background: var(--grigio);
}
.mm-meteo .dm-icona { font-size: 20px; }
.mm-meteo .dm-testo b { font-size: 17px; }
.mm-meteo .dm-data { font-size: 13px; }
.mm-meteo .dm-luogo { display: none; }
@media (max-width: 700px) {
  .marchio-meteo { padding: 10px 12px; gap: 10px; }
  .mm-logo img { max-height: 42px; max-width: 130px; }
  .mm-meteo .data-meteo { padding: 6px 9px; }
  .mm-meteo .dm-data { display: none; }
}

/* I lavori di oggi: quelli aperti si cliccano e si chiudono, quelli già
   chiusi restano lì in grigio, senza link, solo per memoria. */
.lista-lavori li.da-fare { border-color: #bcdcc4; }
.lista-lavori li.da-fare a.ll-testo { text-decoration: none; display: block; }
.lista-lavori li.da-fare a.ll-testo:hover .ll-titolo { text-decoration: underline; }
.lista-lavori li.fatto { background: #f4f5f4; border-color: #e0e2e0; }
.lista-lavori li.fatto .ll-titolo,
.lista-lavori li.fatto .ll-nota { color: #8a8f8a; }
.lista-lavori li.fatto .ll-segno { opacity: .55; }

/* La riga del materiale in magazzino, con i tasti carica/rientra a destra */
.mat-azioni { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.btn.btn-tondo {
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}

/* Le quattro tessere grandi con le icone disegnate (tecnico, amministrazione,
   società e admin). Sono immagini: il testo è dentro l'icona. */
.tessere-icone {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 4px;
}
.tessere-icone a {
  display: block; border-radius: var(--r); overflow: hidden; position: relative;
  text-decoration: none; border: 1px solid var(--bordo);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tessere-icone a:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); border-color: #bfe3cd; }
.tessere-icone img { width: 100%; height: auto; display: block; }
.tessere-icone .ti-pallino {
  position: absolute; top: 10px; right: 10px;
  background: var(--rosso); color: #fff; font-weight: 700; font-size: 13px;
  min-width: 24px; height: 24px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; padding: 0 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
@media (max-width: 700px) { .tessere-icone { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Le due icone in fondo alle pagine dei ruoli cliente */
.icone-fondo { display: flex; gap: 14px; justify-content: center; margin: 18px 0 4px; }
.icone-fondo a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; color: var(--verde-scuro); font-weight: 600; font-size: 13px;
}
.icone-fondo img { width: 64px; height: 64px; object-fit: contain; }

/* Il calendario a mesi: i giorni lavorati si colorano, senza numeri sopra */
/* "fixed": le sette colonne si dividono la larghezza in parti uguali e i
   titoli lunghi si accorciano con i puntini, invece di allargare la tabella
   e far comparire la barra di scorrimento orizzontale. */
.calendario-mese { width: 100%; border-collapse: separate; border-spacing: 4px; margin-top: 10px; table-layout: fixed; }
.calendario-mese th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--testo-tenue); padding: 6px 0; font-weight: 600;
}
.calendario-mese td {
  height: 62px; width: 14.28%; vertical-align: top; border: 1px solid var(--bordo-forte);
  border-radius: 8px; padding: 5px 6px; font-size: 13px; background: #fbfcfb;
}
.calendario-mese td.vuota { background: #fff; border-color: var(--bordo); }
.calendario-mese td.lavorata { background: var(--verde-chiaro); border-color: #cfe6d6; }
.calendario-mese td.oggi { outline: 2px solid var(--verde); outline-offset: -2px; }
.cm-giorno { font-weight: 600; color: var(--verde-scuro); }
.cm-voce {
  display: block; font-size: 11.5px; line-height: 1.25; margin-top: 2px;
  color: var(--testo-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-voce.sopralluogo { color: #0e8f88; font-weight: 600; }
.cm-voce.appuntamento { color: var(--viola); font-weight: 600; }

/* ==========================================================================
   LA MISURA SULLA MAPPA
   ========================================================================== */
.mappa-misura {
  border: 1px solid var(--bordo); border-radius: var(--r);
  background: #fff; padding: 12px; margin: 10px 0 14px;
}
.mp-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mp-barra input[type="search"] { flex: 1 1 240px; min-width: 0; margin: 0; }
.mp-esito { margin: 6px 0 0; font-size: 12.5px; min-height: 1em; }
.mp-tela {
  height: 460px; margin-top: 10px; border-radius: var(--r-s);
  border: 1px solid var(--bordo); overflow: hidden; background: #e8eee7;
}
.mp-tela .leaflet-container { height: 100%; width: 100%; font: inherit; cursor: crosshair; }
.mp-piede {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
.mp-numeri { display: flex; gap: 22px; }
.mp-numeri span { display: flex; flex-direction: column; line-height: 1.2; }
.mp-numeri small { font-size: 11.5px; color: var(--testo-tenue); font-weight: 600;
                   text-transform: uppercase; letter-spacing: .04em; }
.mp-numeri b { font-size: 21px; color: var(--verde-scuro); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .mp-tela { height: 340px; }
  .mp-piede { flex-direction: column; align-items: stretch; }
}
.mappa-misura { border: 0; padding: 0; margin: 0; }
.mp-modi { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; }
.mp-modi .btn.acceso {
  background: var(--verde); border-color: var(--verde); color: #fff;
}

/* La finestra della mappa: si apre sopra al preventivo e non porta via
   la pagina, cosi' la riga che si sta misurando resta li' sotto. */
.mp-velo {
  position: fixed; inset: 0; z-index: 900; padding: 16px;
  background: rgba(14, 30, 18, .55); overflow: auto;
  display: flex; align-items: flex-start; justify-content: center;
}
.mp-velo[hidden] { display: none; }
.mp-finestra {
  background: #fff; border-radius: var(--r); width: min(980px, 100%);
  padding: 14px 16px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.3);
  margin: auto;
}
.mp-testa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--bordo);
}
.mp-testa strong { font-size: 16px; color: var(--verde-scuro); }
.mp-testa .btn { margin-left: auto; }
.mp-conferma {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bordo);
}
body.senza-scorrimento { overflow: hidden; }

/* ==========================================================================
   PREVENTIVI — i filtri a pastiglia e i campi stretti
   ========================================================================== */
.chip {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--bordo-forte); background: #fff; color: var(--verde-scuro);
  font-size: 13px; font-weight: 500; text-decoration: none;
}
.chip:hover { background: var(--verde-tenue); }
.chip.attivo { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.filtri-chip { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }

label.stretto { max-width: 220px; }
.apri-form { cursor: pointer; font-size: 15px; padding: 4px 0; }

/* La tabella delle lavorazioni: i campi devono riempire la loro colonna. */
table.elenco.tab-righe { table-layout: fixed; width: 100%; }
.tab-righe th, .tab-righe td { padding-left: 8px; padding-right: 8px; }
.tab-righe input, .tab-righe select { margin: 0; width: 100%; }
.tab-righe td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.tab-righe input.num { text-align: right; }
/* I tasti della riga devono restare dentro la loro colonna: se non ci
   stanno affiancati vanno a capo, invece di sparire oltre il bordo. */
.tab-righe .azioni-riga {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.tab-righe .azioni-riga .btn { flex: 0 0 auto; }
.tab-righe .btn-togli { padding-left: 9px; padding-right: 9px; }
.tab-righe .in-importo { font-weight: 600; font-variant-numeric: tabular-nums; }
.tab-righe td.num, .tab-righe th.num { text-align: right; }
.tab-righe tfoot th { background: var(--verde-tenue); text-transform: none; font-size: 14px; letter-spacing: 0; color: var(--verde-scuro); }
.tab-righe .riga-totale th { font-size: 16px; color: var(--verde-scuro); }
.nota-misura { margin-top: 6px; font-size: 12.5px; }
.nota-misura.vuota { display: none; }
.etichetta-misura {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--verde-tenue); border: 1px solid #cfe6d6;
  color: var(--verde-scuro); font-weight: 600;
}

.scheda-preventivo .riga-dati { display: flex; gap: 26px; flex-wrap: wrap; }
.riga-dati span { display: flex; flex-direction: column; line-height: 1.3; }
.riga-dati small { font-size: 11.5px; color: var(--testo-tenue); font-weight: 600;
                   text-transform: uppercase; letter-spacing: .04em; }
.riga-dati strong.grosso { font-size: 21px; color: var(--verde-scuro); font-weight: 700; }

.scelta-origine { border: 1px solid var(--bordo); border-radius: var(--r-s); padding: 10px 14px; }
.scelta-origine legend { font-weight: 600; padding: 0 6px; font-size: 13px; }
.radio-riga { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; font-weight: 400; }
.radio-riga input { margin-top: 3px; width: auto; }
.campo-richiesta[hidden] { display: none; }
form.spento input, form.spento select, form.spento textarea { background: #f6f7f5; }

@media (max-width: 760px) {
  table.elenco.tab-righe, .tab-righe tbody, .tab-righe tr.riga-lav, .tab-righe tr.riga-lav td {
    display: block; width: auto;
  }
  .tab-righe thead { display: none; }
  .tab-righe tr.riga-lav {
    border: 1px solid var(--bordo); border-radius: var(--r-s);
    padding: 10px; margin-bottom: 12px;
  }
  .tab-righe tr.riga-lav td { border: 0; padding: 5px 0; }
  .tab-righe td[data-nome]::before {
    content: attr(data-nome); display: block; font-size: 11.5px;
    color: var(--testo-tenue); font-weight: 600; text-transform: uppercase;
  }
  .tab-righe input.num { text-align: left; }
  .tab-righe .azioni-riga { text-align: left; }
}

/* Le azioni in fondo alla riga dell'elenco: se non ci stanno affiancate
   vanno a capo, cosi' il cestino resta sempre visibile. */
.azioni-elenco { white-space: nowrap; }
.azioni-elenco > * { display: inline-block; vertical-align: middle; margin: 2px 0; }
@media (max-width: 900px) { .azioni-elenco { white-space: normal; } }

/* La colonna dei tasti in fondo alle liste: stretta quanto basta e
   attaccata al bordo destro, così non finisce mai fuori dallo schermo. */
table.elenco .col-azioni { width: 1%; white-space: nowrap; text-align: right; }
table.elenco td, table.elenco th { vertical-align: top; }

/* Il tasto per chiudere tutti i lavori in un colpo solo: staccato da quello
   che ne chiude uno, perché non si prema per sbaglio. */
.chiudi-tutti {
  margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--bordo);
}
.chiudi-tutti .btn-grande { width: 100%; }

/* I due tasti "che tipo di lavoro": affiancati su una riga sola, più bassi
   di quelli grandi perché qui non sono l'azione principale della pagina. */
.scelta-tipo { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.scelta-tipo .btn-azione {
  flex: 1 1 260px; padding: 10px 14px; font-size: 14.5px; border-radius: var(--r-s);
}
.scelta-tipo .btn-azione small { font-size: 12px; margin-top: 1px; }
@media (max-width: 560px) { .scelta-tipo .btn-azione { flex-basis: 100%; } }

/* ==========================================================================
   L'OFFICINA — i riquadri di quello che aspetta l'amministratore
   ========================================================================== */
.riquadri-officina {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.ro {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--bordo); border-left: 5px solid var(--bordo);
  border-radius: var(--r-s); padding: 12px 14px; background: #fff;
}
.ro-ok { border-left-color: var(--verde-vivo); }
.ro-no { border-left-color: var(--rosso); }
.ro-che { font-size: 11.5px; font-weight: 600; text-transform: uppercase;
          letter-spacing: .04em; color: var(--testo-tenue); }
.ro-nome { font-size: 16px; color: var(--verde-scuro); }
.ro-data { font-size: 12.5px; color: var(--testo-tenue); }
.ro-note { font-size: 13px; font-style: italic; }
.ro .btn { align-self: flex-start; margin-top: 8px; }
.ro-largo { margin-bottom: 12px; }
.ro-form { margin-top: 8px; }
.ro-form label { margin-top: 6px; }
.ro-form input[type=text] { max-width: 220px; }

/* I tre tasti della home del meccanico */
.tasti-ruolo { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }

/* ==========================================================================
   IL CARICO CON LA SCHEDA TECNICA
   Chi porta via un attrezzo con la scheda deve dire di averla letta: la
   dichiarazione si accende solo quando l'attrezzo è davvero spuntato.
   ========================================================================== */
.riga-materiale { padding: 2px 0; }
.riga-materiale.con-scheda {
  border: 1px solid var(--bordo); border-radius: var(--r-s);
  padding: 10px 12px; margin: 6px 0; background: #fff;
}
.riga-materiale.con-scheda.scelto { border-color: var(--blu); background: var(--blu-chiaro); }
.blocco-scheda {
  display: none; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--bordo);
}
.riga-materiale.con-scheda.scelto .blocco-scheda { display: flex; }
.spunta-scheda { margin: 0; }
.spunta-scheda input { width: auto; }

/* Le scadenze dei documenti, in calendario e nei riquadri della home */
.cm-voce.scadenza { color: var(--rosso); font-weight: 600; }
.ro-attesa { border-left-color: var(--arancio); }

/* ==========================================================================
   ANOMALIE — ogni riga è un sospetto, con accanto la regola che l'ha tirato
   fuori. La striscia colorata a sinistra dice quanto è grave.
   ========================================================================== */
.anomalie { display: flex; flex-direction: column; gap: 10px; }
.anomalia {
  display: flex; align-items: stretch; gap: 12px;
  border: 1px solid var(--bordo); border-radius: var(--r-s);
  background: #fff; overflow: hidden;
}
.an-tono { flex: 0 0 5px; }
.an-corpo { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; flex: 1 1 auto; min-width: 0; }
.an-gravita { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.an-titolo { font-size: 15px; color: var(--verde-scuro); }
.an-dettaglio { font-size: 13.5px; }
.an-regola { font-size: 12px; color: var(--testo-tenue); font-style: italic; margin-top: 3px; }
.anomalia .btn { align-self: center; margin-right: 12px; flex: 0 0 auto; }
.anomalia.gr-alta { background: #fdf5f4; }
@media (max-width: 620px) {
  .anomalia { flex-wrap: wrap; }
  .anomalia .btn { margin: 0 12px 11px; }
}

/* ==========================================================================
   MASTER MODE
   Si vede che è acceso: l'interruttore in home, e una fascia in cima a
   ogni pagina finché non si spegne. È una modalità pericolosa, non deve
   passare inosservata.
   ========================================================================== */
.master-switch { margin-top: 0; }
.ms-tasto {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--grigio); border: 1px solid var(--bordo);
  border-radius: 999px; padding: 5px 12px 5px 6px; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.ms-tasto:hover { background: var(--verde-chiaro); }
.ms-pista {
  flex: 0 0 auto; width: 34px; height: 19px; border-radius: 999px;
  background: #c9d3cd; position: relative; transition: background .15s;
}
.ms-pallina {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: left .15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.master-switch.on .ms-pista { background: var(--arancio); }
.master-switch.on .ms-pallina { left: 17px; }
.ms-testo { font-size: 12.5px; font-weight: 600; line-height: 1.1; color: var(--verde-scuro); }
.ms-testo small { display: block; font-weight: 400; color: var(--testo-tenue); font-size: 11px; }
.ms-vai { display: block; margin-top: 5px; font-size: 11.5px; text-align: center; }

.fascia-master {
  background: var(--arancio); color: #fff; font-size: 13.5px; font-weight: 500;
  padding: 7px 16px; text-align: center;
}
.fascia-master a { color: #fff; text-decoration: underline; }

.master-testa.acceso { border-left: 5px solid var(--arancio); }
.master-avviso {
  background: var(--arancio-chiaro); border: 1px solid #f0d3a8; border-radius: var(--r-s);
  padding: 10px 13px; font-size: 14px;
}
.master-pericolo {
  margin-top: 20px; padding-top: 16px; border-top: 2px dashed #e8c5c0;
}
.master-diff { font-size: 12.5px; margin: 2px 0; }
.md-prima { color: var(--rosso); text-decoration: line-through; }
.md-dopo  { color: var(--verde-vivo); font-weight: 600; }
.master-matita { border-color: var(--arancio) !important; background: var(--arancio) !important; }

/* Le due scelte del backup: veloce o completa, affiancate */
.backup-scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                 gap: 12px; margin: 14px 0 10px; }
.backup-scelte form { margin: 0; }
.backup-scelte .btn-azione { width: 100%; }

/* La ricerca del posto per il meteo */
.cerca-posto { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; }
.cerca-posto input[type=search] { flex: 1 1 260px; min-width: 0; margin: 0; }
#cpEsito { min-height: 20px; margin: 0 0 8px; font-size: 13.5px; }

/* --- Categorie del materiale (magazzino e carico) --- */
.titolo-categoria {
  margin: 18px 0 6px; font-size: 13px; font-weight: 600;
  color: var(--verde); text-transform: uppercase; letter-spacing: .06em;
}
.titolo-categoria:first-of-type { margin-top: 8px; }

/* Il materiale che non e' in magazzino: si vede, ma non si tocca. */
.riga-fuori { opacity: .55; }
.spunta-fuori {
  display: flex; align-items: center; gap: 10px;
  cursor: not-allowed; color: var(--testo-tenue);
}
.spunta-fuori input { width: auto; margin: 0; transform: scale(1.35); }

/* --- Tab delle categorie in magazzino --- */
.tab-categorie {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 12px; padding-bottom: 6px;
  border-bottom: 1px solid var(--bordo);
}
.tab-cat {
  border: 1px solid var(--bordo-forte); background: #fff; color: var(--testo);
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 500; font-family: inherit;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.tab-cat:hover { border-color: var(--verde); }
.tab-cat.attivo { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.tab-n {
  font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--verde-chiaro); color: var(--verde);
}
.tab-cat.attivo .tab-n { background: rgba(255,255,255,.25); color: #fff; }

/* ==========================================================================
   SCHERMI PICCOLI — il menu a sinistra sparisce e torna col tasto in alto
   ========================================================================== */
@media (max-width: 1000px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100vh;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: none; width: 288px; flex-basis: 288px;
  }
  body.menu-aperto .sidebar { transform: none; box-shadow: var(--ombra-3); }
  body.menu-aperto .sb-velo { display: block; }
  body.menu-aperto { overflow: hidden; }
  .tb-menu { display: grid; }
  .topbar { padding: 10px 16px; }
  .topbar .brand { display: flex; }
  .topbar .brand-testo { display: none; }
  .contenuto { padding: 20px 16px 10px; }
}
@media (max-width: 700px) {
  .tb-saluto small { display: none; }
  .tb-saluto h1, .tb-titolo { font-size: 16.5px; }
  .tb-mano { display: none; }
  .tb-meteo .tm-testo { display: none; }
  .userbox { display: none; }
  .topbar .brand { display: none; }
  .tb-destra { gap: 6px; }
}
@media (max-width: 640px) {
  .contenuto { padding: 16px 12px 10px; }
  .card { padding: 17px 16px; border-radius: var(--r); }
  h1 { font-size: 21px; }
  .hero { padding: 18px 16px; }
  .testata-pagina { align-items: stretch; }
  .testata-pagina .row-btn { width: 100%; }
  .testata-pagina .row-btn .btn { flex: 1 1 auto; }
  details.azione-inline > form { position: static; min-width: 0; box-shadow: none; margin-top: 7px; }
  .pulsantiera { gap: 2px; padding: 4px; margin-bottom: 16px; border-radius: var(--r); }
  .scorciatoie { padding: 6px 12px 6px 6px; }
  .sc-img { width: 62px; }
  .sc-nome { font-size: 15px; }
  .calendario { gap: 4px; }
  .cal-cella { min-height: 54px; padding: 4px 5px; }
  .cal-numero { font-size: 13px; }
  .login-box { margin: 16px auto; padding: 22px 18px; }
  /* sul telefono le tessere stanno in due colonne: numeri grandi, pollice comodo */
  .tessere { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tessera { padding: 14px 14px; }
  .tz-numero { font-size: 26px; }
  .stat-griglia { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media print {
  .sidebar, .topbar, .tabs, .fondo, .row-btn, .filtri, .notifica-preventivi,
  .pulsantiera, .scorciatoie, .sb-velo, .fascia-master { display: none !important; }
  body { background: #fff; }
  .app { display: block; }
  .contenuto { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* Senza il menu a sinistra (operaio, login) il marchio sta nella testata */
body.senza-menu .topbar .brand { display: flex; }
body.senza-menu .topbar .brand-testo { display: flex; }
@media (max-width: 700px) { body.senza-menu .topbar .brand-testo { display: none; } }

/* ==========================================================================
   TEMA v3.1 — icone a tratto, card della home, elenchi a schede
   (secondo giro sul template Employee Management, 04-09-2026)
   ========================================================================== */

/* Le icone a tratto: al posto delle emoji, ovunque nel testo */
.ico {
  display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em;
  stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}
.btn .ico { width: 1.1em; height: 1.1em; vertical-align: -.16em; }
h1 .ico { width: .95em; height: .95em; margin-right: 6px; vertical-align: -.1em; color: var(--verde); }
.titolo-sezione > span:first-child .ico { width: 19px; height: 19px; color: var(--verde); }
.tz-icona .ico { width: 20px; height: 20px; color: var(--tono); }
.ll-segno .ico { width: 20px; height: 20px; color: var(--verde); }
.cu-icona .ico { width: 21px; height: 21px; color: var(--verde); }
.tg-icona .ico, .tt-icona .ico { width: 36px; height: 36px; }
.ba-icona .ico { width: 22px; height: 22px; }
.lh-meta .ico, .pj-meta .ico, .muted .ico { opacity: .75; }
.fascia-master .ico, .notifica-preventivi .ico, .allerta .ico { width: 1.1em; height: 1.1em; }
.tab-cat .ico, .chip .ico, .linguette .ico { width: 1em; height: 1em; }

/* Le vecchie icone-immagine (calendario, anagrafica, lavori...) sono ora un
   disegno nel tondino verde chiaro */
.ico-tondo {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--verde-chiaro); color: var(--verde);
}
.ico-tondo .ico { width: 30px; height: 30px; }
.icone-fondo a { gap: 8px; }
.sc .ico-tondo { width: 52px; height: 52px; }
.sc .ico-tondo .ico { width: 24px; height: 24px; }
.scorciatoie { padding: 8px 18px 8px 10px; }

/* Il titolo di sezione senza la riga sotto, come nel template */
.titolo-sezione { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.titolo-sezione > span:first-child { background: var(--verde-chiaro); }

/* Le card: bordo appena accennato e ombra morbida, come nel template */
.card {
  border-color: #edf1ee;
  box-shadow: 0 2px 4px rgba(20, 40, 28, .03), 0 10px 30px -14px rgba(20, 40, 28, .16);
}

/* I cartellini di stato: il colore sta in --c, la pastiglia e' chiara col
   testo scuro dello stesso colore (fallback: pieno, col testo bianco). */
.badge { background: var(--c, var(--verde)); }
@supports (color: color-mix(in srgb, red 10%, white)) {
  .badge {
    background: color-mix(in srgb, var(--c, var(--verde)) 14%, white);
    color: color-mix(in srgb, var(--c, var(--verde)) 78%, black);
  }
  .badge-si { background: var(--verde-chiaro); color: var(--verde-scuro); }
  .badge-no { background: #eceff0; color: #5b6a63; }
}
.badge .ico { width: 1em; height: 1em; }

/* ---------------------------------------------- le tessere in cima alla home */
.tessere-testa { margin-bottom: 18px; }
.nota-tessere { margin: -8px 0 18px; font-size: 13px; }

/* Le quattro azioni grandi della home: card bianche con l'icona nel tondino
   colorato, il nome, una riga di aiuto e il contatore. */
.azioni-grandi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px;
}
.azione-grande {
  --tono: var(--verde-vivo); --tono-chiaro: var(--verde-chiaro);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  background: #fff; border: 1px solid #edf1ee; border-radius: 18px;
  padding: 18px 18px 16px; text-decoration: none; color: var(--testo);
  box-shadow: 0 2px 4px rgba(20, 40, 28, .03), 0 10px 30px -14px rgba(20, 40, 28, .16);
  transition: transform .12s ease, box-shadow .14s ease;
}
.azione-grande::before {
  content: ""; position: absolute; right: -50px; top: -50px; width: 160px; height: 160px;
  border-radius: 50%; background: radial-gradient(closest-side, var(--tono-chiaro), transparent);
  pointer-events: none;
}
.azione-grande > * { position: relative; }
.azione-grande:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
.ag-icona {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--tono-chiaro); color: var(--tono);
}
.ag-icona .ico { width: 26px; height: 26px; }
.ag-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-testo strong { font-size: 16px; font-weight: 600; color: var(--verde-scuro); }
.ag-testo small { font-size: 12.5px; color: var(--testo-tenue); line-height: 1.35; }
.ag-n, .ag-freccia {
  position: absolute; top: 16px; right: 16px;
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 999px; font-size: 13px; font-weight: 700;
}
.ag-n { background: var(--tono); color: #fff; box-shadow: 0 6px 14px -6px var(--tono); }
.ag-freccia { color: var(--tono); background: #fff; border: 1px solid var(--bordo); }
.ag-freccia .ico { width: 16px; height: 16px; }
.ag-verde   { --tono: var(--verde-vivo); --tono-chiaro: var(--verde-chiaro); }
.ag-blu     { --tono: var(--blu);        --tono-chiaro: var(--blu-chiaro); }
.ag-arancio { --tono: var(--arancio);    --tono-chiaro: var(--arancio-chiaro); }
.ag-viola   { --tono: var(--viola);      --tono-chiaro: var(--viola-chiaro); }
.ag-rosso   { --tono: var(--rosso);      --tono-chiaro: var(--rosso-chiaro); }
@media (max-width: 900px) { .azioni-grandi { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 640px) {
  .azione-grande { padding: 14px 14px 12px; gap: 10px; border-radius: 14px; }
  .ag-icona { width: 44px; height: 44px; border-radius: 12px; }
  .ag-icona .ico { width: 22px; height: 22px; }
  .ag-testo strong { font-size: 14.5px; }
  .ag-testo small { font-size: 12px; }
}

/* --------------------------------- gli elenchi a schede ("On Going Project") */
.progetti { display: flex; flex-direction: column; gap: 10px; }
.progetto {
  --tono: var(--verde-vivo); --tono-chiaro: var(--verde-chiaro);
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--bordo); border-radius: 14px;
  padding: 12px 14px; box-shadow: var(--ombra-1);
}
.pj-blu     { --tono: var(--blu);     --tono-chiaro: var(--blu-chiaro); }
.pj-arancio { --tono: var(--arancio); --tono-chiaro: var(--arancio-chiaro); }
.pj-viola   { --tono: var(--viola);   --tono-chiaro: var(--viola-chiaro); }
.pj-verde   { --tono: var(--verde-vivo); --tono-chiaro: var(--verde-chiaro); }
.pj-icona {
  flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 12px; background: var(--tono-chiaro); color: var(--tono);
}
.pj-icona .ico { width: 24px; height: 24px; }
.pj-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pj-titolo { font-weight: 600; font-size: 15px; color: var(--testo); text-decoration: none; }
.pj-titolo:hover { color: var(--verde); }
.pj-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 12.5px; color: var(--testo-tenue);
}
.pj-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.pj-avanzamento { display: flex; align-items: center; gap: 12px; }
.pj-avanzamento .avanzamento { flex: 1 1 auto; max-width: 320px; margin: 0; gap: 3px; }
.pj-avanzamento .avanzamento i { height: 5px; }
.pj-avanzamento .avanzamento i.on { background: var(--tono); }
.pj-avanzamento small { font-size: 11.5px; color: var(--testo-tenue); white-space: nowrap; }
.pj-azioni { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.pj-apri {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--bordo-forte); color: var(--verde); background: #fff; text-decoration: none;
}
.pj-apri:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.pj-apri .ico { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .progetto { flex-wrap: wrap; gap: 10px 12px; padding: 12px; }
  .pj-icona { width: 44px; height: 44px; }
  .pj-corpo { flex-basis: calc(100% - 56px); }
  .pj-azioni { margin-left: auto; }
}

/* Le liste della home diventano schede, come i progetti del template */
.lista-home li {
  background: #fff; border: 1px solid var(--bordo); border-radius: 12px;
  padding: 11px 14px; margin-bottom: 8px; box-shadow: var(--ombra-1);
}
.lista-home li:last-child { border-bottom: 1px solid var(--bordo); }
.lista-home li.lh-totale { border-color: #cfe6d6; }

/* La tabella: prima cella col nome e la riga piccola sotto, come "Employee Performances" */
table.elenco td small.sotto { display: block; font-size: 12px; color: var(--testo-tenue); font-weight: 400; }
table.elenco th { padding-top: 8px; padding-bottom: 8px; }
table.elenco td { padding-top: 13px; padding-bottom: 13px; }
table.elenco td strong { font-weight: 600; }

/* Statistiche: la prima tessera e' piena di verde, come nel template "Bounce Rate" */
.testata-pagina + .stat-griglia .stat:first-child { background: var(--verde); border-color: var(--verde); color: #fff; }
.testata-pagina + .stat-griglia .stat:first-child::before { background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent); }
.testata-pagina + .stat-griglia .stat:first-child .st-numero,
.testata-pagina + .stat-griglia .stat:first-child .st-etichetta,
.testata-pagina + .stat-griglia .stat:first-child .st-nota,
.testata-pagina + .stat-griglia .stat:first-child .st-numero small { color: #fff; }
.testata-pagina + .stat-griglia .stat:first-child .st-nota { opacity: .85; }

/* Le barre orizzontali come "Top Channels": la barra chiara sta dietro al nome */
.barra { grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.ba-nome { position: relative; z-index: 1; padding: 7px 12px; font-size: 13.5px; font-weight: 500; }
.ba-solco {
  grid-column: 1; grid-row: 1; height: 100%; border-radius: 8px; background: transparent;
}
.ba-riemp { border-radius: 8px; background: var(--verde-chiaro); }
.ba-riemp.blu     { background: var(--blu-chiaro); }
.ba-riemp.arancio { background: var(--arancio-chiaro); }
.ba-riemp.viola   { background: var(--viola-chiaro); }
.ba-riemp.rosso   { background: var(--rosso-chiaro); }
.barra .ba-nome { grid-column: 1; grid-row: 1; }
.ba-valore { grid-column: 2; grid-row: 1; }

/* Il logo intero in cima al menu a sinistra */
.sb-brand.con-logo { padding: 16px 18px 10px; justify-content: center; }
.sb-logo { display: block; max-width: 100%; max-height: 72px; width: auto; object-fit: contain; }

/* ==========================================================================
   TEMA v3.2 — moduli, documenti, statistiche, meteo, cronologia, calendario
   (dai template: Form UI Kit, Card Form, Document CRM, GovMetrics, Weather,
   Quotely, Features boxes — 04-09-2026)
   ========================================================================== */

/* ---------------------------------------------------------------- i moduli */
label { font-size: 13.5px; font-weight: 500; color: var(--testo); margin: 14px 0 6px; }
label small, label .muted { font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], input[type=time],
input:not([type]), select, textarea {
  border: 1.5px solid var(--bordo-forte); border-radius: 12px; padding: 11px 14px;
  background: #fff; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
input:hover, select:hover, textarea:hover { border-color: #a9bcb1; }
input:focus, select:focus, textarea:focus {
  border-color: var(--verde); box-shadow: 0 0 0 4px rgba(11, 107, 50, .12);
}
input:disabled, select:disabled, textarea:disabled, input[readonly] { background: var(--grigio); color: var(--testo-tenue); }
input:user-invalid, select:user-invalid, textarea:user-invalid {
  border-color: var(--rosso); box-shadow: 0 0 0 4px rgba(214, 69, 69, .12);
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366746b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
select[multiple] { background-image: none; padding-right: 14px; }
textarea { min-height: 110px; line-height: 1.5; }

/* caselle e pallini ridisegnati */
input[type=checkbox], input[type=radio] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin: 0; flex: 0 0 auto; vertical-align: -4px;
  border: 1.5px solid var(--bordo-forte); border-radius: 6px; background: #fff;
  display: inline-grid; place-items: center; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--verde); }
input[type=checkbox]:checked, input[type=radio]:checked { background: var(--verde); border-color: var(--verde); }
input[type=checkbox]:checked::before {
  content: ""; width: 11px; height: 6px; border: 2.5px solid #fff; border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
input[type=radio]:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(11, 107, 50, .14); }
.spunta input, .spunta-inline input, .spunta-geo input, .cliente-riga input, .radio-riga input, .spunta-fuori input { transform: none; }
.spunta { border-radius: 12px; border: 1.5px solid var(--bordo-forte); }
.spunta:has(input:checked) { border-color: var(--verde); background: var(--verde-tenue); }

/* la zona dove si trascina il file */
.zona-file {
  display: flex; align-items: center; gap: 14px; position: relative; cursor: pointer;
  margin: 6px 0 4px; padding: 18px 20px;
  border: 2px dashed var(--bordo-forte); border-radius: 14px; background: var(--verde-tenue);
  font-weight: 400; color: var(--testo); transition: border-color .14s ease, background .14s ease;
}
.zona-file:hover, .zona-file:focus-within { border-color: var(--verde); background: var(--verde-chiaro); }
.zf-icona { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--verde); flex: 0 0 auto; }
.zf-icona .ico { width: 22px; height: 22px; }
.zf-testo { font-size: 14px; line-height: 1.45; }
.zona-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
/* gli altri campi file, dove non c'e' la zona: sempre un riquadro tratteggiato */
input[type=file]:not(.zona-file input) {
  padding: 14px 16px; border: 2px dashed var(--bordo-forte); border-radius: 12px;
  background: var(--verde-tenue); font-size: 14px; color: var(--testo-tenue);
}
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; font-size: 13.5px; margin-right: 12px; cursor: pointer;
  padding: 7px 14px; border-radius: 9px; border: 1px solid var(--verde); background: var(--verde); color: #fff;
}

/* la scelta a tessere (tipo di lavoro, cosa ne faccio, categoria) */
.seg a, .seg button {
  border: 1.5px solid var(--bordo); border-radius: 14px; box-shadow: none;
  background: #fff; padding: 14px 14px; font-weight: 500;
}
.seg a:hover, .seg button:hover { border-color: var(--verde); background: var(--verde-tenue); transform: none; box-shadow: none; }
.seg a.attivo, .seg button.attivo {
  background: var(--verde-tenue); color: var(--verde-scuro); border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(11, 107, 50, .12); font-weight: 600;
}
.seg a.attivo .ico, .seg button.attivo .ico { color: var(--verde); }
.seg .ico { width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; }

/* il selettore a segmenti (calendario, filtri) */
.segmenti {
  display: inline-flex; align-items: stretch; gap: 3px; padding: 4px;
  background: var(--grigio); border: 1px solid var(--bordo); border-radius: 999px;
}
.sg-voce {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px; text-decoration: none;
  color: var(--testo-tenue); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.sg-voce:hover { color: var(--verde-scuro); }
.sg-voce.attivo { background: var(--verde); color: #fff; font-weight: 600; box-shadow: 0 6px 14px -8px var(--verde-ombra); }
.sg-voce .ico { width: 16px; height: 16px; }
.testata-pagina .segmenti { margin: 0; }

/* i pulsanti, quattro stati come nel kit */
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(11, 107, 50, .22); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }
form .btn[type=submit]:not(.btn-small):not(.btn-grande) { min-width: 180px; }

/* ------------------------------------------------ Documenti: le schede file */
.doc-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.doc-scheda {
  --tono: var(--testo-tenue); --tono-chiaro: #eef1ef;
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--bordo); border-radius: 16px; padding: 14px;
  box-shadow: var(--ombra-1); transition: transform .12s ease, box-shadow .14s ease;
}
.doc-scheda:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
.doc-pdf { --tono: #e0483e; --tono-chiaro: #fdecec; }
.doc-img { --tono: #7f5af0; --tono-chiaro: #f1eefe; }
.doc-doc { --tono: #2f6fd6; --tono-chiaro: #eaf2ff; }
.doc-xls { --tono: #1faa6f; --tono-chiaro: #e3f4ea; }
.doc-alt { --tono: #ee8a10; --tono-chiaro: #fff4e5; }
.doc-testa { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-testa strong { font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.doc-testa small { font-size: 12px; color: var(--testo-tenue); }
.doc-icona {
  display: grid; place-items: center; height: 118px; border-radius: 12px;
  background: var(--grigio); text-decoration: none;
}
.doc-foglio {
  position: relative; display: grid; place-items: center; width: 64px; height: 76px;
  border-radius: 10px 22px 10px 10px; background: var(--tono-chiaro); color: var(--tono);
}
.doc-foglio::before {
  content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px;
  background: var(--tono); opacity: .35; border-radius: 0 22px 0 10px;
}
.doc-foglio .ico { width: 30px; height: 30px; }
.doc-foglio b {
  position: absolute; bottom: -6px; right: -8px; padding: 2px 6px; border-radius: 6px;
  background: var(--tono); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--testo-tenue); min-height: 18px; }
.doc-note { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-importo { font-weight: 600; color: var(--verde-scuro); }
.doc-azioni { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.doc-azioni .btn { flex: 1 1 auto; }
.doc-azioni form { flex: 1 1 auto; display: flex; }
.doc-azioni form .btn { width: 100%; }
@media (max-width: 640px) { .doc-griglia { grid-template-columns: repeat(2, 1fr); gap: 10px; } .doc-icona { height: 96px; } }

/* --------------------------------------------- Statistiche (GovMetrics) */
.co-asta { background: linear-gradient(180deg, #8fde4a 0%, #2e9e63 55%, var(--verde) 100%); border-radius: 8px 8px 3px 3px; }
.co-asta.spenta { background: #e3ebe5; }
.colonne { border-bottom: 1px solid var(--bordo); }
.co-valore { color: var(--testo); }
.an-disco { box-shadow: 0 8px 20px -10px rgba(20, 40, 28, .3); }
.stat .st-etichetta { color: var(--verde); }
.testata-pagina + .stat-griglia .stat:first-child .st-etichetta { color: #fff; }
.curiosa { border-left: 0; }

/* ------------------------------------------------- Meteo (template Weather) */
.meteo-ora .data-meteo {
  position: relative; overflow: hidden; text-align: left;
  background: linear-gradient(135deg, #1e2b3f 0%, #2b3c58 100%);
  color: #fff; border: 0; border-radius: 20px; padding: 26px 28px;
  box-shadow: 0 18px 40px -18px rgba(30, 43, 63, .6);
}
.meteo-ora .data-meteo::before {
  content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent);
}
.meteo-ora .dm-data { color: rgba(255,255,255,.75); font-size: 13.5px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.meteo-ora .dm-meteo { margin-top: 10px; gap: 18px; font-size: 18px; }
.meteo-ora .dm-icona { font-size: 72px; line-height: 1; }
.meteo-ora .dm-testo b { font-size: 60px; color: #fff; font-weight: 600; letter-spacing: -.03em; line-height: 1; display: block; }
.meteo-ora .dm-luogo { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.8); font-size: 13.5px; }
.prev-griglia { margin-top: 16px; }
.prev-giorno { border-radius: 16px; padding: 14px 10px; }
.pg-data { color: var(--testo-tenue); font-weight: 500; }
.pg-icona { font-size: 38px; line-height: 1.4; }
.pg-temp b { font-size: 18px; font-weight: 600; }
.pg-desc { font-weight: 500; color: var(--testo); }

/* ---------------------------------------- Cronologia (registro note Quotely) */
ul.storia { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; font-size: 14px; color: var(--testo); }
ul.storia::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--bordo); }
ul.storia li {
  position: relative; margin: 0 0 8px; padding: 10px 14px;
  background: #fff; border: 1px solid var(--bordo); border-radius: 12px; box-shadow: var(--ombra-1);
}
ul.storia li::before {
  content: ""; position: absolute; left: -21px; top: 15px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--verde-vivo); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--verde-chiaro);
}
ul.storia li .mono, ul.storia li small { color: var(--testo-tenue); }

/* ------------------------------------- Box informativi (Features boxes) */
details.accordeon { border-radius: 14px; box-shadow: var(--ombra-1); border-color: #edf1ee; position: relative; }
details.accordeon summary { padding-left: 22px; }
details.accordeon summary::before {
  content: ""; position: absolute; left: 0; top: 18px; width: 4px; height: 18px; border-radius: 0 4px 4px 0; background: var(--verde-vivo);
}
details.accordeon[open] summary { border-bottom: 1px solid var(--bordo); }
.nota-box { background: #fff; border: 1px solid #edf1ee; border-left: 0; border-top: 4px solid #f0c94a; border-radius: 14px; box-shadow: var(--ombra-1); }
.nota-box h3 { font-size: 15.5px; }
.flash { border-left: 0; border-top: 4px solid var(--verde); background: #fff; border-color: #edf1ee; border-top-color: var(--verde); box-shadow: var(--ombra-1); }
.errore { border-left: 0; border-top: 4px solid var(--rosso); background: #fff; border-color: #edf1ee; border-top-color: var(--rosso); box-shadow: var(--ombra-1); }

/* Le pastiglie dei filtri (preventivi) */
.chip { border-radius: 999px; padding: 7px 14px; }
.filtri-chip { gap: 6px; }

/* ==========================================================================
   TEMA v3.3 — i moduli a sezioni (template Card Form / Form UI Kit)
   ========================================================================== */
.modulo-blocco { padding: 6px 0 16px; margin-bottom: 4px; border-bottom: 1px solid var(--bordo); }
.modulo-blocco:last-of-type { border-bottom: 0; }
.modulo-blocco > label:first-of-type { margin-top: 6px; }
.mb-titolo {
  margin: 12px 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--verde);
}
.btn-invia {
  width: 100%; padding: 14px 20px; font-size: 15.5px; border-radius: 12px; margin-top: 6px;
  box-shadow: 0 10px 24px -10px var(--verde-ombra);
}
@media (min-width: 900px) { .btn-invia { max-width: 420px; } }
form p:last-child { margin-bottom: 0; }

/* la scelta a tessere con icona (tipo di lavoro) */
.scelta-tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.tessera-scelta {
  --tono: var(--verde-vivo); --tono-chiaro: var(--verde-chiaro);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 18px; border: 1.5px solid var(--bordo); border-radius: 16px;
  background: #fff; text-decoration: none; color: var(--testo);
  transition: border-color .14s ease, box-shadow .14s ease, transform .12s ease;
}
.tessera-scelta:hover { border-color: var(--tono); box-shadow: 0 0 0 3px var(--tono-chiaro); transform: translateY(-1px); }
.tessera-scelta strong { font-size: 15.5px; font-weight: 600; color: var(--verde-scuro); }
.tessera-scelta small { font-size: 12.5px; color: var(--testo-tenue); line-height: 1.4; }
.ts-icona { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--tono-chiaro); color: var(--tono); margin-bottom: 4px; }
.ts-icona .ico { width: 22px; height: 22px; }
.ts-blu     { --tono: var(--blu);     --tono-chiaro: var(--blu-chiaro); }
.ts-arancio { --tono: var(--arancio); --tono-chiaro: var(--arancio-chiaro); }
.ts-viola   { --tono: var(--viola);   --tono-chiaro: var(--viola-chiaro); }

/* le scelte a pallino diventano tessere affiancate */
.scelta-radio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; border: 0; padding: 0; margin: 6px 0 0; }
.scelta-radio .radio-riga {
  margin: 0; padding: 12px 14px; border: 1.5px solid var(--bordo); border-radius: 14px; background: #fff;
  cursor: pointer; transition: border-color .14s ease, background .14s ease;
}
.scelta-radio .radio-riga:hover { border-color: var(--verde); }
.scelta-radio .radio-riga:has(input:checked) { border-color: var(--verde); background: var(--verde-tenue); box-shadow: 0 0 0 3px rgba(11, 107, 50, .12); }
.scelta-radio .radio-riga:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.scelta-radio .radio-riga input { margin-top: 2px; }

/* la zona file piccola (allegati facoltativi) */
.zona-file-mini { padding: 12px 16px; }
.zona-file-mini .zf-icona { width: 38px; height: 38px; }
.zona-file-mini .zf-icona .ico { width: 18px; height: 18px; }

/* il modulo delle segnalazioni: testata come una card del template */
.modulo-nuova > .seg { margin-bottom: 22px; }
.modulo-nuova h1 { margin-bottom: 6px; }
.gps-no, .gps-ok { font-size: 13px; margin: 6px 0 0; }
/* le caselle con width:auto scritto nella pagina non devono schiacciarsi */
input[type=checkbox], input[type=radio] { min-width: 20px; min-height: 20px; flex-basis: 20px; }

/* ==========================================================================
   LA FASCIA DELLE AZIONI in home: un solo riquadro verde pieno con le quattro
   voci affiancate, per spezzare la serie di box bianchi (tessere sopra,
   card sotto). Icona nel tondino bianco, nome, aiuto, contatore.
   ========================================================================== */
.azioni-banda {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-bottom: 18px; padding: 10px;
  background: linear-gradient(120deg, var(--verde-scuro) 0%, var(--verde) 55%, #158a48 100%);
  border-radius: 20px;
  box-shadow: 0 18px 40px -18px var(--verde-ombra);
}
.azioni-banda::before {
  content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent);
  pointer-events: none;
}
.azioni-banda::after {
  content: ""; position: absolute; left: 30%; bottom: -160px; width: 280px; height: 280px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.08), transparent);
  pointer-events: none;
}
.azioni-banda .azione-grande {
  position: relative; z-index: 1;
  flex-direction: row; align-items: center; gap: 14px;
  background: transparent; border: 1px solid transparent; box-shadow: none;
  padding: 14px 16px; border-radius: 14px; color: #fff;
}
.azioni-banda .azione-grande::before { display: none; }
.azioni-banda .azione-grande + .azione-grande::after {
  content: ""; position: absolute; left: -3px; top: 18%; bottom: 18%; width: 1px;
  background: rgba(255,255,255,.18);
}
.azioni-banda .azione-grande:hover {
  transform: none; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); box-shadow: none;
}
.azioni-banda .ag-icona {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  background: #fff; color: var(--verde);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35);
}
.azioni-banda .ag-icona .ico { width: 23px; height: 23px; }
.azioni-banda .ag-testo strong { color: #fff; font-size: 15px; }
.azioni-banda .ag-testo small { color: rgba(255,255,255,.78); }
.azioni-banda .ag-n, .azioni-banda .ag-freccia {
  position: static; margin-left: auto; flex: 0 0 auto;
  background: #fff; color: var(--verde-scuro); border: 0; box-shadow: none;
}
.azioni-banda .ag-freccia { background: rgba(255,255,255,.16); color: #fff; }
@media (max-width: 1100px) { .azioni-banda { grid-template-columns: repeat(2, 1fr); } .azioni-banda .azione-grande + .azione-grande::after { display: none; } }
@media (max-width: 640px) {
  .azioni-banda { padding: 8px; gap: 4px; border-radius: 16px; }
  .azioni-banda .azione-grande { padding: 12px 12px; gap: 10px; }
  .azioni-banda .ag-icona { width: 42px; height: 42px; }
  .azioni-banda .ag-testo small { display: none; }
}

/* ==========================================================================
   LE QUATTRO CARD DELLA HOME (template Educa "course card"): meta' alta
   colorata piena con l'icona grande, pastiglie agli angoli; sotto nome,
   aiuto e "Apri". Spezzano la fila di box bianchi perche' sono colorate.
   ========================================================================== */
.azioni-educa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.azione-card {
  --tono: var(--verde-vivo); --tono-scuro: var(--verde);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #edf1ee; border-radius: 20px;
  text-decoration: none; color: var(--testo);
  box-shadow: 0 2px 4px rgba(20, 40, 28, .03), 0 12px 32px -14px rgba(20, 40, 28, .18);
  transition: transform .14s ease, box-shadow .16s ease;
}
.azione-card:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); }
.ac-testa {
  position: relative; display: grid; place-items: center; height: 138px;
  background: linear-gradient(150deg, var(--tono) 0%, var(--tono-scuro) 100%);
}
.ac-testa::before {
  content: ""; position: absolute; right: -40px; bottom: -70px; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent);
}
.ac-pill {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--tono-scuro);
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
}
.ac-pill.ac-n { left: auto; right: 12px; background: #1b2620; color: #fff; min-width: 30px; text-align: center; }
.ac-icona {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px;
  background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  transition: transform .16s ease;
}
.azione-card:hover .ac-icona { transform: scale(1.06); }
.ac-icona .ico { width: 34px; height: 34px; stroke-width: 1.7; }
.ac-corpo { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 14px; flex: 1 1 auto; }
.ac-corpo strong { font-size: 16px; font-weight: 600; color: var(--testo); line-height: 1.25; }
.ac-corpo small { font-size: 12.5px; color: var(--testo-tenue); line-height: 1.4; }
.ac-piede { margin-top: auto; padding-top: 10px; display: flex; justify-content: flex-end; }
.ac-vai {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--tono-scuro); color: #fff;
}
.ac-vai .ico { width: 15px; height: 15px; }
.ac-verde   { --tono: #22b573; --tono-scuro: #128a46; }
.ac-blu     { --tono: #5b6cf0; --tono-scuro: #3f4fd4; }
.ac-viola   { --tono: #7b61ff; --tono-scuro: #5b43d6; }
.ac-rosso   { --tono: #ff6a55; --tono-scuro: #e5533f; }
.ac-arancio { --tono: #f5a33a; --tono-scuro: #d97e05; }
@media (max-width: 1100px) { .azioni-educa { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 640px) {
  .azioni-educa { gap: 10px; }
  .azione-card { border-radius: 16px; }
  .ac-testa { height: 104px; }
  .ac-icona { width: 54px; height: 54px; border-radius: 16px; }
  .ac-icona .ico { width: 26px; height: 26px; }
  .ac-corpo { padding: 12px 12px 12px; }
  .ac-corpo strong { font-size: 14.5px; }
  .ac-corpo small { display: none; }
  .ac-vai { padding: 6px 12px; font-size: 12px; }
}

/* ==========================================================================
   L'ANELLO DELLA TIMBRATURA (Clock kit): il cerchio si riempie con le ore del
   turno, dentro il tempo che passa e da quando.
   ========================================================================== */
.orologio-turno { display: grid; place-items: center; margin: 6px 0 18px; }
.ot-anello {
  --p: 0;
  width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--verde-vivo) calc(var(--p) * 1%), #e6ece8 0);
  box-shadow: 0 14px 30px -16px rgba(20, 40, 28, .35);
  position: relative;
}
.orologio-turno { --p: 0; }
.orologio-turno .ot-anello { --p: inherit; }
.orologio-turno.fuori .ot-anello { background: conic-gradient(#cbd6cf 0, #e6ece8 0); }
.ot-centro {
  width: 176px; height: 176px; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: inset 0 0 0 1px var(--bordo);
}
.ot-tempo { font-size: 42px; font-weight: 700; letter-spacing: -.02em; color: var(--verde-scuro); font-variant-numeric: tabular-nums; line-height: 1; }
.orologio-turno.fuori .ot-tempo { color: #aab5ae; }
.ot-nota { font-size: 12.5px; color: var(--testo-tenue); font-weight: 500; }
.orologio-turno.dentro .ot-nota { color: var(--verde); }
.tasti-timbro { max-width: 640px; margin: 0 auto; }
.tasto-timbro { border-radius: 18px; }
.card-timbra .testata-pagina { margin-bottom: 8px; }

/* ==========================================================================
   NUOVA SEGNALAZIONE (template "form builder"): la pagina e' una pila di
   blocchi bianchi numerati su fondo grigio; la categoria e' una griglia di
   tessere con l'icona.
   ========================================================================== */
.modulo-nuova { background: transparent; border: 0; box-shadow: none; padding: 0; counter-reset: passo; }
.modulo-nuova > .seg, .modulo-nuova > form > .seg { margin-bottom: 16px; }
.modulo-nuova > h1, .modulo-nuova > .occhiello, .modulo-nuova > p.muted { padding: 0 4px; }
.modulo-nuova .modulo-blocco {
  position: relative; counter-increment: passo;
  background: #fff; border: 1px solid #edf1ee; border-radius: 18px;
  padding: 18px 20px 20px 20px; margin: 0 0 14px;
  box-shadow: 0 2px 4px rgba(20, 40, 28, .03), 0 10px 30px -14px rgba(20, 40, 28, .16);
}
.modulo-nuova .modulo-blocco::before {
  content: counter(passo); position: absolute; top: 16px; right: 18px;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde-chiaro); color: var(--verde-scuro); font-size: 12.5px; font-weight: 700;
}
.modulo-nuova .modulo-blocco .mb-titolo { margin-top: 0; }
.modulo-nuova .nota-box { margin: 0 0 14px; }
.modulo-nuova form > p:last-child { padding: 0 4px; }

.sel-nascosto { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; margin: 0; padding: 0; border: 0; }
.griglia-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 4px; }
.cat-tessera {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 92px; padding: 12px 10px; cursor: pointer; font-family: inherit;
  background: #fff; border: 1.5px solid var(--bordo); border-radius: 14px; color: var(--testo);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .12s ease;
}
.cat-tessera:hover { border-color: var(--verde); transform: translateY(-1px); }
.cat-tessera.attivo { border-color: var(--verde); background: var(--verde-tenue); box-shadow: 0 0 0 3px rgba(11, 107, 50, .12); }
.ct-icona { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--grigio); color: var(--verde); }
.cat-tessera.attivo .ct-icona { background: var(--verde); color: #fff; }
.ct-icona .ico { width: 20px; height: 20px; }
.ct-nome { font-size: 13px; font-weight: 500; text-align: center; line-height: 1.3; }
.cat-tessera.attivo .ct-nome { font-weight: 600; color: var(--verde-scuro); }
/* la tendina nascosta non deve bloccare l'invio: il browser segnala l'errore sulla griglia */
.griglia-cat:has(+ .sel-nascosto:invalid) { outline: 0; }
@media (max-width: 640px) { .griglia-cat { grid-template-columns: repeat(3, 1fr); gap: 8px; } .cat-tessera { min-height: 80px; padding: 10px 6px; } .ct-nome { font-size: 12px; } .modulo-nuova .modulo-blocco { padding: 16px 14px; } }

/* ==========================================================================
   DOCUMENTI come "Dashboard CRM - Document": ricerca in testata, "Carica"
   grande accanto alla zona di trascinamento, poi le cartelle a schede.
   ========================================================================== */
.doc-testata .testata-pagina { align-items: center; }
.doc-cerca {
  display: flex; align-items: center; gap: 10px; margin: 0;
  min-width: 320px; max-width: 460px; flex: 1 1 320px;
  padding: 0 14px; border: 1.5px solid var(--bordo-forte); border-radius: 12px; background: #fff;
}
.doc-cerca:focus-within { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(11, 107, 50, .12); }
.doc-cerca .dc-icona { color: var(--testo-tenue); display: grid; place-items: center; }
.doc-cerca .dc-icona .ico { width: 18px; height: 18px; }
.doc-cerca input { border: 0 !important; box-shadow: none !important; padding: 11px 0; background: transparent; }
@media (max-width: 640px) { .doc-cerca { min-width: 0; width: 100%; } }

.doc-azioni-top { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; margin-bottom: 16px; }
.doc-crea {
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 20px 22px; min-height: 96px; border-radius: 16px; text-decoration: none;
  background: linear-gradient(135deg, var(--verde-vivo), var(--verde)); color: #fff;
  font-size: 16px; font-weight: 600; box-shadow: 0 14px 30px -14px var(--verde-ombra);
  transition: transform .12s ease, box-shadow .14s ease;
}
.doc-crea:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px var(--verde-ombra); }
.dcr-piu { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.2); }
.dcr-piu .ico { width: 18px; height: 18px; }
.doc-drop {
  display: flex; align-items: center; gap: 14px; margin: 0; cursor: pointer;
  padding: 18px 22px; min-height: 96px; border-radius: 16px;
  border: 2px dashed var(--bordo-forte); background: #fff; color: var(--testo); font-weight: 400; font-size: 14px;
  transition: border-color .14s ease, background .14s ease;
}
.doc-drop:hover { border-color: var(--verde); background: var(--verde-tenue); }
.dd-icona { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--grigio); color: var(--verde); flex: 0 0 auto; }
.dd-icona .ico { width: 22px; height: 22px; }
@media (max-width: 760px) { .doc-azioni-top { grid-template-columns: 1fr; } .doc-crea, .doc-drop { min-height: 0; padding: 16px 18px; } }

.cartelle { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cartella {
  --tono: var(--verde-vivo); --tono-chiaro: var(--verde-chiaro);
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--bordo); border-radius: 16px; padding: 14px;
  text-decoration: none; color: var(--testo); box-shadow: var(--ombra-1);
  transition: transform .12s ease, box-shadow .14s ease, border-color .14s ease;
}
.cartella:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
.cartella.aperta { border-color: var(--tono); box-shadow: 0 0 0 3px var(--tono-chiaro); }
.ca-verde { --tono: var(--verde-vivo); --tono-chiaro: var(--verde-chiaro); }
.ca-blu   { --tono: var(--blu);   --tono-chiaro: var(--blu-chiaro); }
.ca-viola { --tono: var(--viola); --tono-chiaro: var(--viola-chiaro); }
.ca-testa { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ca-testa strong { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-testa small { font-size: 12px; color: var(--testo-tenue); }
.ca-icona { display: grid; place-items: center; height: 104px; border-radius: 12px; background: var(--grigio); color: var(--tono); }
.ca-icona .ico { width: 44px; height: 44px; stroke-width: 1.5; }
.cartella.aperta .ca-icona { background: var(--tono-chiaro); }
@media (max-width: 640px) { .cartelle { grid-template-columns: repeat(2, 1fr); gap: 10px; } .ca-icona { height: 80px; } .ca-icona .ico { width: 36px; height: 36px; } }

/* ==========================================================================
   FORM WIZARD, CAMPI CON PREFISSO/SUFFISSO (Forms Widgets kit) e BACKUP (Cloudy)
   ========================================================================== */
.wizard {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px;
  padding: 8px; background: #fff; border: 1px solid #edf1ee; border-radius: 16px; box-shadow: var(--ombra-1);
  position: sticky; top: calc(var(--topbar-h) + 10px); z-index: 20;
}
.wz-passo { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; text-decoration: none; color: var(--testo-tenue); transition: background .12s ease; }
.wz-passo:hover { background: var(--verde-tenue); }
.wz-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; background: var(--grigio); color: var(--testo-tenue); font-size: 13px; font-weight: 700; border: 1.5px solid var(--bordo-forte); }
.wz-testo { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wz-testo strong { font-size: 13.5px; font-weight: 600; color: var(--testo); }
.wz-testo small { font-size: 11.5px; color: var(--testo-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-passo.attivo { background: var(--verde-tenue); }
.wz-passo.attivo .wz-n { background: var(--verde); border-color: var(--verde); color: #fff; }
.wz-passo.attivo .wz-testo strong { color: var(--verde-scuro); }
.wz-passo.fatto .wz-n { background: var(--verde-chiaro); border-color: var(--verde-vivo); color: var(--verde-scuro); }
@media (max-width: 700px) { .wizard { position: static; gap: 4px; padding: 6px; } .wz-passo { padding: 8px; flex-direction: column; text-align: center; gap: 4px; } .wz-testo small { display: none; } }

.campo-add { display: flex; align-items: stretch; width: 100%; }
.campo-add input { flex: 1 1 auto; min-width: 0; }
.campo-add input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.campo-add input:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ca-prefisso, .ca-suffisso {
  display: inline-flex; align-items: center; padding: 0 13px; white-space: nowrap;
  background: var(--grigio); border: 1.5px solid var(--bordo-forte); color: var(--testo-tenue);
  font-size: 13.5px; font-weight: 500;
}
.ca-prefisso { border-right: 0; border-radius: 12px 0 0 12px; }
.ca-suffisso { border-left: 0; border-radius: 0 12px 12px 0; }
.campo-add:focus-within .ca-prefisso, .campo-add:focus-within .ca-suffisso { border-color: var(--verde); color: var(--verde-scuro); }

/* Backup come "Cloudy": anello e numeri a sinistra, azioni a destra, file a righe */
.bk-testa { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin: 16px 0 12px; }
.bk-stato { display: flex; align-items: center; gap: 22px; padding: 16px 20px; background: var(--grigio); border-radius: 18px; }
.bk-anello { width: 150px; height: 150px; flex: 0 0 auto; box-shadow: none; }
.bk-anello .ot-centro { width: 122px; height: 122px; }
.bk-anello .ot-tempo { font-size: 30px; }
.bk-numeri { display: flex; flex-direction: column; gap: 10px; }
.bk-numeri span { display: flex; flex-direction: column; line-height: 1.2; }
.bk-numeri b { font-size: 20px; font-weight: 700; color: var(--verde-scuro); }
.bk-numeri small { font-size: 12px; color: var(--testo-tenue); }
.backup-scelte { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
.bk-azione {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--bordo); background: #fff;
  font-family: inherit; color: var(--testo); transition: border-color .14s ease, transform .12s ease, box-shadow .14s ease;
}
.bk-azione:hover { transform: translateY(-1px); box-shadow: var(--ombra-2); }
.bk-azione strong { display: block; font-size: 15px; font-weight: 600; color: var(--verde-scuro); }
.bk-azione small { display: block; font-size: 12.5px; color: var(--testo-tenue); }
.bka-icona { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto; }
.bka-icona .ico { width: 22px; height: 22px; }
.bk-veloce .bka-icona { background: var(--verde-chiaro); color: var(--verde); }
.bk-veloce:hover { border-color: var(--verde); }
.bk-completa .bka-icona { background: var(--blu-chiaro); color: var(--blu); }
.bk-completa:hover { border-color: var(--blu); }
@media (max-width: 900px) { .bk-testa { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .bk-stato { flex-direction: column; text-align: center; } .bk-numeri { flex-direction: row; gap: 18px; } }

.file-righe { display: flex; flex-direction: column; gap: 8px; }
.file-riga {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; background: #fff; border: 1px solid var(--bordo); border-radius: 14px; box-shadow: var(--ombra-1);
}
.fr-icona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; }
.fr-icona .ico { width: 22px; height: 22px; }
.fr-verde { background: var(--verde-chiaro); color: var(--verde); }
.fr-blu { background: var(--blu-chiaro); color: var(--blu); }
.fr-testo { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.fr-testo strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.fr-testo small, .fr-quando small { font-size: 12px; color: var(--testo-tenue); }
.fr-quando { display: flex; flex-direction: column; font-size: 13px; min-width: 130px; }
.fr-azioni { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* ==========================================================================
   OVUNQUE SI COMPILA: regole generali per tutti i moduli dell'app
   ========================================================================== */
/* il tasto d'invio in fondo a un modulo e' sempre largo, come nei template */
.card form > p:last-child > .btn:only-child:not(.btn-small),
.card form > .row-btn:last-child > .btn:only-child:not(.btn-small) {
  width: 100%; max-width: 420px; padding: 13px 20px; font-size: 15px; border-radius: 12px;
}
/* i titoli dei moduli dentro le card, senza l'icona: come i titolini di sezione */
.card > h2:not(.titolo-sezione), .card > h3, .card form h2, .card form h3 {
  font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--verde); margin: 18px 0 4px;
}
.card > h2:not(.titolo-sezione):first-child, .card > h3:first-child { margin-top: 0; }
/* i campi affiancati dentro i filtri e le righe delle tabelle restano compatti */
.filtri input, .filtri select { padding: 9px 12px; }
table input:not([type=checkbox]):not([type=radio]), table select { padding: 8px 10px; border-radius: 9px; font-size: 14px; }
/* i moduli "in linea" (password, quantità) non diventano larghi */
form.in-linea .btn, .in-linea .btn, details .btn-small { width: auto; }

/* La creazione di un account (template "Form Register"): icona, titolo,
   sottotitolo al centro, poi i campi */
.modulo-account { max-width: 720px; }
.ma-testa { text-align: center; padding: 6px 0 14px; }
.ma-testa h2, .ma-testa h3, .card .ma-testa h2, .card .ma-testa h3 {
  font-size: 20px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--verde-scuro); margin: 10px 0 4px;
}
.ma-testa p { margin: 0 auto; max-width: 48ch; font-size: 13.5px; }
.ma-icona {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--verde-chiaro); color: var(--verde); box-shadow: 0 0 0 8px var(--verde-tenue);
}
.ma-icona .ico { width: 30px; height: 30px; }
.modulo-account form > p:last-child { text-align: center; }
.modulo-account form > p:last-child > .btn { max-width: 100%; }

/* Calendario settimana: intestazioni con il numero del giorno nel tondino, oggi pieno;
   le voci dentro le celle sono pastiglie colorate come nel template */
.calendario-mese th .cm-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; margin-left: 4px; background: var(--grigio); color: var(--testo); font-size: 12.5px; }
.calendario-mese th.oggi .cm-num { background: var(--verde); color: #fff; }
.calendario-mese td .cm-voce { padding: 4px 7px; border-radius: 7px; margin-top: 4px; background: var(--verde-chiaro); color: var(--verde-scuro); white-space: normal; line-height: 1.3; font-size: 11.5px; text-decoration: none; }
.calendario-mese td .cm-voce.sopralluogo { background: #e0f4f3; color: #0e6f69; }
.calendario-mese td .cm-voce.appuntamento { background: var(--viola-chiaro); color: var(--viola-scuro); }
.calendario-mese td .cm-voce.scadenza { background: var(--rosso-chiaro); color: var(--rosso-scuro); }
.calendario-mese td .cm-voce .ico { width: 12px; height: 12px; vertical-align: -1px; }

/* ==========================================================================
   LE SCHEDE DI DETTAGLIO (lavoro, segnalazione, sopralluogo, commessa,
   cliente): testata con riga verde in cima, codice in pastiglia, cartellini
   allineati, azioni raccolte; le sezioni sotto con l'icona nel tondino.
   ========================================================================== */
.scheda-testa { border-top: 4px solid var(--verde); }
.scheda-testa h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 22px; }
.scheda-testa h1 > .mono {
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  background: var(--verde-chiaro); color: var(--verde-scuro); padding: 4px 10px; border-radius: 8px;
}
.scheda-testa h1 .badge { font-size: 12px; }
.scheda-testa > p:first-of-type .badge { margin-right: 4px; }
.scheda-testa .occhiello a { color: var(--verde); }
.scheda-testa .griglia2 p strong { color: var(--testo-tenue); font-weight: 500; font-size: 13px; }
.scheda-testa .griglia2 > div > p:first-child { line-height: 1.8; }
.azioni-scheda { padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--bordo); }
.azioni-scheda form { margin: 0; }
.kv { background: var(--grigio); border-radius: 12px; padding: 12px 16px; gap: 8px 18px; }
.kv dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kv dd { font-weight: 500; }
.timeline .dot.on { box-shadow: 0 0 0 4px var(--verde-chiaro); }
.timeline li:not(:last-child)::before { background: var(--verde-chiaro); }
/* foto della segnalazione: schede con l'anteprima grande */
.foto-mini { max-width: 100%; width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 0; box-shadow: var(--ombra-1); }
.scheda-testa .griglia2 > div:last-child p { margin: 0 0 10px; }

/* ==========================================================================
   STRAVIX: modulo "prodotto" a due colonne per i lavori, calendario con il
   mese piccolo a sinistra e la settimana a destra, barra filtri degli elenchi,
   home con meteo ed Esci nella card di benvenuto, login col video di sfondo.
   ========================================================================== */
/* --- home: meteo, master mode ed esci nella card di benvenuto */
.hero-meteo { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.hero .master-switch { margin: 0; }
.hero .ms-vai { flex-basis: 100%; text-align: right; margin: 0; }
.hero .tb-meteo { background: #fff; }
@media (max-width: 900px) { .hero-meteo { justify-content: center; } }

/* --- login col filmato dietro */
.login-sfondo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.login-velo { position: fixed; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(4, 66, 29, .55), rgba(4, 66, 29, .78)); }
body:has(.login-sfondo) .app { position: relative; z-index: 1; }
body:has(.login-sfondo) .topbar { background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255,255,255,.4); }
body:has(.login-sfondo) .fondo { color: rgba(255, 255, 255, .85); }
body:has(.login-sfondo) .login-box { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); border: 0; }
body:has(.login-sfondo) { background: var(--verde-scuro); }

/* --- il modulo a due colonne ("Add New Product") */
.form-prodotto { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 0 22px; align-items: start; }
.fp-main, .fp-lato { display: flex; flex-direction: column; }
.fp-lato .modulo-blocco { background: var(--grigio); border: 0; border-radius: 16px; padding: 16px 18px 18px; margin-bottom: 14px; }
.fp-lato .modulo-blocco .mb-titolo { margin-top: 0; }
.fp-lato input, .fp-lato select, .fp-lato .ca-prefisso, .fp-lato .ca-suffisso { background: #fff; }
.fp-lato .ca-prefisso, .fp-lato .ca-suffisso { background: #eef2ef; }
.fp-tipo { display: flex; align-items: center; gap: 12px; --tono: var(--verde-vivo); --tono-chiaro: var(--verde-chiaro); }
.fp-tipo .ts-icona { margin: 0; width: 42px; height: 42px; }
.fp-tipo strong { display: block; font-size: 15px; color: var(--verde-scuro); }
.fp-tipo small { display: block; font-size: 12px; color: var(--testo-tenue); line-height: 1.35; }
.fp-piede {
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  margin: 6px -24px -22px; padding: 14px 24px; border-top: 1px solid var(--bordo);
  background: #fff; border-radius: 0 0 var(--r-xl) var(--r-xl);
  position: sticky; bottom: 0; z-index: 5;
}
.fp-piede .btn { min-width: 160px; }
@media (max-width: 900px) { .form-prodotto { grid-template-columns: 1fr; } .fp-piede { margin: 6px -16px -17px; padding: 12px 16px; } .fp-piede .btn { flex: 1 1 auto; } }

/* --- calendario: mese piccolo + settimana */
.cal-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.cal-lato { position: sticky; top: calc(var(--topbar-h) + 16px); }
.cal-mini { padding: 16px 16px 14px; }
.cm-testata { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cm-testata strong { font-size: 14.5px; color: var(--verde-scuro); }
.cm-freccia { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bordo); color: var(--verde); text-decoration: none; }
.cm-freccia:hover { background: var(--verde-chiaro); }
.cm-freccia .ico { width: 15px; height: 15px; }
.cm-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cm-g { text-align: center; font-size: 11px; font-weight: 600; color: var(--testo-tenue); text-transform: uppercase; padding: 4px 0 6px; }
.cm-cella {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  font-size: 13px; font-weight: 500; color: var(--testo); text-decoration: none;
}
.cm-cella:hover { background: var(--grigio); }
.cm-festivo { color: var(--testo-tenue); }
.cm-sett { background: var(--verde-chiaro); color: var(--verde-scuro); border-radius: 8px; }
.cm-oggi { background: var(--verde) !important; color: #fff !important; font-weight: 700; }
.cm-punto { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--viola); }
.cm-oggi .cm-punto { background: #fff; }
.cm-oggi-btn { width: 100%; margin-top: 12px; }
.calendario-mese td { height: 240px; }
@media (max-width: 1100px) { .cal-layout { grid-template-columns: 1fr; } .cal-lato { position: static; } .cal-mini { max-width: 380px; } }

/* --- la barra dei filtri degli elenchi ("Products List") */
form.filtri {
  background: var(--grigio); border-radius: 14px; padding: 10px 12px; gap: 10px;
  align-items: center; margin-bottom: 16px;
}
form.filtri > div { min-width: 150px; flex: 1 1 150px; }
form.filtri label { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--testo-tenue); font-weight: 600; }
form.filtri select, form.filtri input { background: #fff; border-color: #fff; border-radius: 10px; padding: 9px 12px; font-size: 14px; }
form.filtri select { padding-right: 34px; }
form.filtri .btn { margin-top: 0; }

/* ==========================================================================
   TESTATA SENZA MENU (operaio, login): logo intero a sinistra; LOGIN pulito
   (template Stravix "Sign in"): fondo sfumato verde chiaro, card centrata,
   campi con l'icona dentro, pulsante largo. Il video di sfondo e' stato tolto.
   ========================================================================== */
body.senza-menu .topbar .brand.con-logo { display: flex; align-items: center; }
.tb-logo { display: block; height: 46px; width: auto; max-width: 200px; object-fit: contain; }
.tb-saluto.tb-vuoto { flex: 1 1 auto; }
body.senza-menu .topbar { padding-left: 20px; }
@media (max-width: 700px) {
  body.senza-menu .topbar .brand { display: flex; }
  body.senza-menu .topbar .brand-testo { display: none; }
  .tb-logo { height: 38px; max-width: 150px; }
  body.senza-menu .topbar .userbox { display: none; }
}

.login-sfondo-sfumato {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(700px 420px at 15% 10%, rgba(31, 170, 111, .18), transparent 65%),
    radial-gradient(600px 380px at 90% 90%, rgba(11, 107, 50, .16), transparent 65%),
    var(--grigio);
}
body:has(.login-sfondo-sfumato) .app { position: relative; z-index: 1; }
body:has(.login-sfondo-sfumato) .topbar { background: transparent; border-color: transparent; }
body:has(.login-sfondo-sfumato) .contenuto { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--topbar-h) - 90px); }
.login-box { max-width: 460px; width: 100%; margin: 20px auto; padding: 34px 36px 30px; border-radius: 22px; border: 1px solid #edf1ee; box-shadow: 0 30px 60px -28px rgba(20, 40, 28, .35); }
.login-testa { margin-bottom: 14px; }
.login-testa img { max-height: 84px; max-width: 260px; }
.login-box h1 { margin: 6px 0 4px; font-size: 24px; }
.login-sotto { text-align: center; color: var(--testo-tenue); font-size: 14px; margin: 0 0 18px; }
.login-box .btn-invia { max-width: none; margin-top: 12px; }
.login-aiuto { border-top: 0; padding-top: 6px; margin-top: 12px; }

/* i campi con l'icona dentro a sinistra */
.campo-icona { position: relative; display: block; }
.campo-icona .ci-icona { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--testo-tenue); display: grid; place-items: center; pointer-events: none; }
.campo-icona .ci-icona .ico { width: 18px; height: 18px; }
.campo-icona > input { padding-left: 42px; }
.campo-icona .campo-password { display: block; }
.campo-icona .campo-password > input { padding-left: 42px; }
@media (max-width: 640px) { .login-box { padding: 26px 20px 22px; margin: 8px auto; } }

/* ==========================================================================
   RITOCCHI: pulsanti azzurri -> verde scuro; "Nuovo preventivo" come tasto
   vero con la nota di fianco; icona del saluto al posto della manina; logo
   grande sopra il campo email nel login.
   ========================================================================== */
.btn-blu, .btn-blu:hover { background: var(--verde-scuro); border-color: var(--verde-scuro); color: #fff; box-shadow: 0 6px 14px -8px rgba(4, 66, 29, .6); }
.btn-blu:hover { filter: brightness(1.15); }
.tg-blu { background: linear-gradient(160deg, var(--verde), var(--verde-scuro)); }
.doc-crea { background: linear-gradient(135deg, var(--verde), var(--verde-scuro)); }

.apri-form-grande { list-style: none; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; cursor: pointer; padding: 4px 0; }
.apri-form-grande::-webkit-details-marker { display: none; }
.afg-tasto { padding: 13px 22px; font-size: 15.5px; border-radius: 12px; }
.afg-nota { flex: 1 1 320px; font-size: 13.5px; color: var(--testo-tenue); line-height: 1.45; }
details.card-nuovo-prev[open] .apri-form-grande { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--bordo); }

.tb-mano-img { display: block; width: 44px; height: 44px; object-fit: contain; }
.tb-mano { display: grid; place-items: center; }

.login-logo-grande { margin: 4px 0 14px; }
.login-logo-grande img { max-height: 130px; max-width: 100%; }
.login-box h1 { margin-top: 0; }

/* ==========================================================================
   LOGIN come la bozza PREVIEW.jpg: pannello verde scuro, card bianca a sinistra
   con logo grande e campi a riga, collage di foto a destra.
   HOME: la barra col saluto non si vede (solo il tasto menu sul telefono).
   ========================================================================== */
body:has(.login-scena) { background: linear-gradient(120deg, #e4f0e8 0%, #f3f6f4 45%, #dfe8e1 100%); }
body:has(.login-scena) .topbar, body:has(.login-scena) .fondo { display: none; }
body:has(.login-scena) .contenuto { max-width: none; padding: 0; min-height: 100vh; display: grid; place-items: center; }
.login-scena { width: 100%; display: grid; place-items: center; padding: 28px 16px; }
.login-pannello {
  display: grid; grid-template-columns: minmax(320px, 520px) minmax(300px, 520px); gap: 40px; align-items: center;
  background: #004c44; border-radius: 10px; padding: 40px;
  box-shadow: 0 40px 80px -30px rgba(0, 76, 68, .55);
  max-width: 1160px; width: 100%;
}
.login-pannello.senza-foto { grid-template-columns: minmax(320px, 560px); justify-content: center; }
.login-card { background: #fff; border-radius: 14px; padding: 44px 48px 40px; box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .5); }
.lc-logo { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto 34px; }
.lc-titolo { margin: 0 0 26px; }
.lc-titolo h1 { margin: 0; font-size: 30px; font-weight: 600; color: #222; letter-spacing: -.01em; }
.lc-reset { display: inline-block; margin-top: 2px; color: #2f8f7f; font-size: 14px; text-decoration: none; }
.lc-reset:hover { text-decoration: underline; }
.lc-form label { margin: 18px 0 2px; font-size: 12.5px; color: var(--testo-tenue); font-weight: 400; }
.lc-form input[type=email], .lc-form input[type=password], .lc-form input[type=text] {
  border: 0; border-bottom: 1.5px solid #cfd8d3; border-radius: 0; padding: 8px 0; background: transparent;
  font-size: 15px; box-shadow: none;
}
.lc-form input:focus { border-bottom-color: #2f8f7f; box-shadow: none; }
.lc-form .campo-password > input { padding-right: 40px; }
.lc-form .occhio { right: 0; }
.lc-piede { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 34px; }
.lc-aiuto { color: #333; font-size: 14px; text-decoration: none; }
.lc-aiuto:hover { text-decoration: underline; }
.lc-entra { background: #2f8f7f; border-color: #2f8f7f; min-width: 130px; padding: 12px 24px; border-radius: 8px; box-shadow: 0 10px 20px -10px rgba(47, 143, 127, .8); }
.login-foto { display: block; width: 100%; height: auto; border-radius: 6px; }
.login-scena .flash, .login-scena .errore { margin-bottom: 14px; }
@media (max-width: 900px) {
  .login-pannello { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
  .login-card { padding: 28px 22px 24px; }
  .lc-logo { max-width: 300px; margin-bottom: 22px; }
  .login-foto { max-height: 260px; object-fit: cover; }
}
@media (max-width: 640px) { .login-scena { padding: 10px; } .login-foto { display: none; } .login-pannello { padding: 12px; } }

/* la barra col saluto in home: sparisce sul computer, resta il tasto menu sul telefono */
@media (min-width: 1001px) { .topbar-home { display: none; } }
@media (max-width: 1000px) { .topbar-home .tb-saluto, .topbar-home .tb-destra { display: none; } .topbar-home { min-height: 60px; } }

/* Il riquadro del login un po' piu' piccolo (circa il 10%), computer e telefono */
.login-pannello { max-width: 1040px; padding: 34px; gap: 34px; grid-template-columns: minmax(300px, 470px) minmax(280px, 470px); }
.login-card { padding: 38px 42px 34px; }
.lc-logo { max-width: 390px; margin-bottom: 28px; }
.lc-titolo h1 { font-size: 27px; }
.lc-piede { margin-top: 28px; }
@media (max-width: 900px) {
  .login-pannello { padding: 14px; gap: 14px; max-width: 560px; }
  .login-card { padding: 24px 20px 20px; }
  .lc-logo { max-width: 260px; margin-bottom: 18px; }
  .lc-titolo h1 { font-size: 24px; }
}
@media (max-width: 640px) { .login-scena { padding: 8px; } .login-pannello { padding: 10px; } .login-card { padding: 22px 18px 18px; } .lc-logo { max-width: 230px; } }

/* ==========================================================================
   TELEFONO come il template "Finance Mobile App" (solo sotto i 700 px):
   barra di navigazione fissa in fondo, home con saluto e avatar, tessere a
   scorrimento, azioni rapide tonde, pulsantiera dell'operaio in fondo,
   conferma a tutto schermo. Il computer non cambia.
   ========================================================================== */
@media (max-width: 700px) {
  /* --- la barra in fondo, come un'app */
  .barra-basso {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60;
    border-bottom: 0; border-top: 1px solid var(--bordo);
    box-shadow: 0 -8px 24px -12px rgba(12, 38, 20, .35);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
  }
  body.con-menu .app-corpo { padding-bottom: 84px; }
  .bb-foglio { top: auto; bottom: 100%; border-radius: 18px 18px 0 0; border-bottom: 0; border-top: 1px solid var(--bordo); box-shadow: 0 -18px 40px -16px rgba(12, 38, 20, .38); }
  .bb-velo { top: auto; bottom: 100%; height: 100vh; }
  .fondo { padding-bottom: 20px; }

  /* --- la testata di home sul telefono: saluto + avatar */
  .topbar-home .tb-saluto { display: flex; }
  .topbar-home .tb-destra { display: flex; }
  .topbar-home { min-height: 64px; }
  .tb-avatar { margin-left: 4px; }
  .hero { display: none; }

  /* --- le tessere "da fare": una riga che scorre di lato */
  .tessere-testa {
    display: flex; grid-template-columns: none; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 2px 2px 8px; margin: 0 -4px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tessere-testa::-webkit-scrollbar { display: none; }
  .tessere-testa .tessera { flex: 0 0 150px; scroll-snap-align: start; padding: 12px 12px; }
  .tessere-testa .tz-numero { font-size: 26px; }
  .tessere-testa .tz-etichetta { font-size: 12.5px; }
  .tessere-testa .tz-icona { width: 34px; height: 34px; }
  .tessere-testa .tz-icona .ico { width: 17px; height: 17px; }
  .nota-tessere { margin-top: 0; }

  /* --- le quattro azioni: tonde, in una riga, come Transfer / Bill / Request / More */
  .azioni-educa { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
  .azione-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; align-items: center; }
  .azione-card:hover { transform: none; box-shadow: none; }
  .ac-testa { height: auto; background: transparent; width: 64px; }
  .ac-testa::before { display: none; }
  .ac-icona {
    width: 60px; height: 60px; border-radius: 50%; background: var(--tono-chiaro, var(--verde-chiaro)); color: var(--tono-scuro);
    box-shadow: none;
  }
  .ac-verde .ac-icona { background: var(--verde-chiaro); }
  .ac-blu .ac-icona { background: var(--blu-chiaro); }
  .ac-viola .ac-icona { background: var(--viola-chiaro); }
  .ac-rosso .ac-icona { background: var(--rosso-chiaro); }
  .ac-arancio .ac-icona { background: var(--arancio-chiaro); }
  .ac-pill { display: none; }
  .ac-pill.ac-n { display: grid; top: -2px; right: -2px; left: auto; min-width: 22px; height: 22px; padding: 0 6px; font-size: 11px; background: var(--rosso); border: 2px solid #fff; }
  .ac-corpo { padding: 6px 0 0; align-items: center; text-align: center; gap: 0; }
  .ac-corpo strong { font-size: 12px; font-weight: 600; color: var(--testo); }
  .ac-corpo small, .ac-piede { display: none; }

  /* --- le liste della home come "Recent Activity": righe con l'icona tonda */
  .lista-home li { padding: 10px 12px; border-radius: 14px; }
  .lh-titolo { font-size: 14px; }

  /* --- l'operaio: i quattro tasti della giornata fissi in fondo allo schermo */
  body.senza-menu .pulsantiera {
    position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 60;
    margin: 0; padding: 5px; gap: 4px; border-radius: 18px;
    box-shadow: 0 -8px 28px -10px rgba(12, 38, 20, .45), var(--ombra-2);
  }
  body.senza-menu .app-corpo { padding-bottom: 120px; }
  body.senza-menu .contenuto { padding-top: 12px; }

  /* --- statistiche: le colonne scorrono, le etichette come chip */
  .colonne-etichette span { background: var(--grigio); border-radius: 999px; padding: 4px 6px; margin: 0 2px; min-width: 44px; }
  .colonne { min-width: 100%; }
  .colonna { min-width: 44px; }
}

/* la conferma a tutto schermo ("Payment Sent!"): la disegna il JS di layout_bottom sul telefono */
.conferma-schermo {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: rgba(4, 30, 15, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: cs-entra .2s ease;
}
@keyframes cs-entra { from { opacity: 0; } to { opacity: 1; } }
.cs-card {
  width: 100%; max-width: 360px; background: #fff; border-radius: 24px; padding: 30px 24px 22px;
  text-align: center; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
}
.cs-spunta {
  width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center;
  background: var(--verde-chiaro); color: var(--verde); animation: cs-pop .35s cubic-bezier(.2, 1.4, .5, 1);
}
.cs-spunta svg { width: 46px; height: 46px; }
@keyframes cs-pop { from { transform: scale(.4); } to { transform: scale(1); } }
.cs-testo { font-size: 15.5px; font-weight: 500; color: var(--verde-scuro); line-height: 1.45; }
.cs-testo a { color: var(--verde); }
.cs-ok { width: 100%; margin-top: 20px; padding: 13px; border-radius: 12px; }

/* ==========================================================================
   I COLORI DELLE QUATTRO CATEGORIE
   Sono quelli dei riquadri della home e tornano nelle rispettive pagine:
   barra dei filtri, pulsanti, etichette. Verde = lavori, rosso = segnalazioni,
   blu = sopralluoghi, arancio = news; il viola e' delle commesse.
   ========================================================================== */
.cat-segnalazioni { --cat: #e5533f; --cat-scuro: #c33a28; --cat-chiaro: #fdece9; }
.cat-lavori       { --cat: #128a46; --cat-scuro: #0b6b32; --cat-chiaro: #e3f4ea; }
.cat-sopralluoghi { --cat: #3f4fd4; --cat-scuro: #2f3cb0; --cat-chiaro: #eaecfe; }
.cat-news         { --cat: #f28f0a; --cat-scuro: #c26f00; --cat-chiaro: #fff4e5; }
.cat-commesse     { --cat: #9c4f96; --cat-scuro: #7d3d78; --cat-chiaro: #f7ecf6; }

/* il pulsante della categoria: sostituisce l'azzurro nelle pagine di categoria */
.btn-cat {
  background: var(--cat, var(--verde)); border-color: var(--cat, var(--verde)); color: #fff;
  box-shadow: 0 6px 14px -8px var(--cat, var(--verde));
}
.btn-cat:hover { filter: brightness(1.08); }

/* la barra dei filtri degli elenchi prende il colore della categoria */
.contenuto[class*="cat-"] form.filtri[method="get"] {
  background: var(--cat); border: 0;
}
.contenuto[class*="cat-"] form.filtri[method="get"] label { color: rgba(255, 255, 255, .92); }
.contenuto[class*="cat-"] form.filtri[method="get"] select,
.contenuto[class*="cat-"] form.filtri[method="get"] input { background: #fff; border-color: #fff; }
.contenuto[class*="cat-"] form.filtri[method="get"] .btn { background: #fff; color: var(--cat-scuro); border-color: #fff; box-shadow: none; }

/* le tessere della home che parlano di una categoria: testo del suo colore */
.tessera.cat-segnalazioni .tz-etichetta { color: #e5533f; }
.tessera.cat-lavori .tz-etichetta       { color: #128a46; }
.tessera.cat-sopralluoghi .tz-etichetta { color: #3f4fd4; }
.tessera.cat-news .tz-etichetta         { color: #f28f0a; }
.tessera.cat-commesse .tz-etichetta     { color: #9c4f96; }

/* --- i tre riquadri "crea nuovo" in cima agli elenchi: come la home, più bassi */
.azioni-mini { margin-bottom: 16px; }
.azioni-mini .ac-testa { height: 92px; }
.azioni-mini .ac-icona { width: 50px; height: 50px; border-radius: 16px; }
.azioni-mini .ac-icona .ico { width: 26px; height: 26px; }
.azioni-mini .ac-corpo { padding: 12px 14px 12px; }
.azioni-mini .ac-corpo strong { font-size: 15px; }
.azioni-mini .ac-corpo small { font-size: 12px; }
.azioni-mini .ac-vai { padding: 6px 12px; font-size: 12.5px; }
@media (max-width: 700px) { .azioni-mini .ac-testa { height: auto; } }

/* --- lo stato di fianco al titolo, non più in una colonna a parte */
.titolo-con-stato { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.titolo-con-stato .badge { flex: 0 0 auto; }
table.elenco td .titolo-con-stato strong { font-weight: 600; }

/* --- la barra sotto la riga: una sola, nel colore giusto */
.barra-unica { display: block; flex: 1 1 auto; max-width: 340px; height: 6px; border-radius: 999px; background: #e6ece8; overflow: hidden; }
.barra-unica i { display: block; height: 100%; border-radius: 999px; background: var(--verde-vivo); min-width: 6px; }
.barra-cat i { background: var(--cat, var(--verde-vivo)); }
.pj-avanzamento .barra-unica { margin: 0; }

/* --- l'icona del lavoro: appalto (l'accordo) o spot (gli attrezzi) */
.pj-icona.ico-lavoro { background: var(--verde-chiaro); color: var(--verde); }
.pj-icona.ico-lavoro svg { width: 26px; height: 26px; }

/* ==========================================================================
   SOPRALLUOGHI: la mappa che si apre dentro la riga
   ========================================================================== */
.sop-riga { position: relative; background: #fff; border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--ombra-1); overflow: hidden; }
.sop-riga .sop-item { border: 0; border-radius: 0; box-shadow: none; padding-right: 68px; }
.sop-riga .sop-item:hover { transform: none; box-shadow: none; background: var(--verde-tenue); }
.sop-mappa-tasto {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--bordo-forte); background: #fff; color: var(--cat, var(--verde));
  display: grid; place-items: center; font-size: 18px;
}
.sop-mappa-tasto:hover { background: var(--cat-chiaro, var(--verde-chiaro)); border-color: var(--cat, var(--verde)); }
.sop-mappa-tasto.acceso { background: var(--cat, var(--verde)); border-color: var(--cat, var(--verde)); color: #fff; }
.sop-mappa-tasto .ico { width: 20px; height: 20px; }
.sop-mappa { border-top: 1px solid var(--bordo); background: var(--grigio); }
.sm-tela { height: 300px; }
.sm-tela .leaflet-container { height: 100%; width: 100%; font: inherit; }
.sm-vuota { padding: 22px; text-align: center; color: var(--testo-tenue); font-size: 14px; }
.sm-vuota a { color: var(--cat, var(--verde)); font-weight: 600; }

/* ==========================================================================
   CALENDARIO: le tre viste e l'elenco eventi a scomparsa
   ========================================================================== */
.cal-comandi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.calendario-mese.vista-3g td { height: 320px; }
.calendario-mese.vista-settimana td { height: 240px; }
.calendario-mese.vista-mese td { height: 104px; font-size: 12px; }
.calendario-mese.vista-mese .cm-voce { font-size: 10.5px; padding: 2px 5px; margin-top: 3px; }
.calendario-mese.vista-mese .cm-giorno { font-size: 12.5px; }
.elenco-eventi { margin-top: 6px; }
.elenco-eventi > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--testo-tenue); padding: 6px 2px;
}
.elenco-eventi > summary::-webkit-details-marker { display: none; }
.elenco-eventi > summary::before { content: "▾"; font-size: 11px; transition: transform .15s ease; }
.elenco-eventi[open] > summary::before { transform: rotate(180deg); }
.elenco-eventi > summary:hover { color: var(--verde); }
.ee-n { background: var(--verde-chiaro); color: var(--verde-scuro); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; }

/* --- preventivi: la nota della mappa, più grande e con l'icona */
.apri-form-grande { flex-wrap: wrap; }
.afg-nota {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px; line-height: 1.45; color: var(--testo);
  background: var(--verde-tenue); border: 1px dashed #bfe3cd; border-radius: 14px;
  padding: 12px 16px; max-width: 620px;
}
.afn-icona {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 12px; background: #fff; color: var(--verde); border: 1px solid #cfe6d6;
}
.afn-icona .ico { width: 22px; height: 22px; }
@media (max-width: 640px) { .afg-nota { font-size: 13.5px; padding: 10px 12px; } }

/* Il riquadro "Lavori" con la tendina dei due tipi di lavoro */
details.azione-card { position: relative; padding: 0; }
details.azione-card > summary { display: flex; flex-direction: column; cursor: pointer; list-style: none; height: 100%; }
details.azione-card > summary::-webkit-details-marker { display: none; }
details.azione-card[open] { z-index: 30; }
/* la tendina esce dal riquadro: senza questo la taglia via, e sembra che il
   tasto "Crea nuovo" non faccia niente */
details.azione-card { overflow: visible; }
details.azione-card[open] { overflow: visible; }
.azioni-educa:has(details[open]), .azioni-mini:has(details[open]) { overflow: visible; }
.ac-tendina {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: #fff; border: 1px solid var(--bordo); border-radius: 14px; box-shadow: var(--ombra-3);
  min-width: 240px;
}
.ac-tendina a {
  display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--testo);
}
.ac-tendina a:hover { background: var(--verde-tenue); }
.ac-tendina strong { font-size: 14.5px; color: var(--verde-scuro); }
.ac-tendina small { font-size: 12px; color: var(--testo-tenue); line-height: 1.35; }
@media (max-width: 700px) {
  details.azione-card > summary { align-items: center; }
  .ac-tendina { left: auto; right: auto; width: 240px; }
}

/* la quinta categoria: i preventivi, arancione come le offerte al cliente */
.cat-preventivi { --cat: #96603c; --cat-scuro: #74482b; --cat-chiaro: #f6eee7; }
/* quando il riquadro è uno solo (schede di lavoro e segnalazione) sta a sinistra, stretto */
.azioni-una { grid-template-columns: minmax(240px, 340px); }
@media (max-width: 700px) { .azioni-una { grid-template-columns: 1fr; } .azioni-una .azione-card { flex-direction: row; align-items: center; gap: 12px; } .azioni-una .ac-corpo { align-items: flex-start; text-align: left; padding: 0; } .azioni-una .ac-corpo small { display: block; } }

/* pulsante col solo bordo nel colore della categoria (Apri, cestino) */
.btn-cat-bordo {
  background: #fff; color: var(--cat, var(--verde)); border-color: var(--cat, var(--verde)); box-shadow: none;
}
.btn-cat-bordo:hover { background: var(--cat-chiaro, var(--verde-chiaro)); filter: none; }
.btn-cestino { padding-left: 10px; padding-right: 10px; }
.cod-cat { color: var(--cat, var(--verde-scuro)); }
a:hover .cod-cat { text-decoration: underline; }
.card-nuovo-prev .afg-nota { margin: 0 0 16px; }

/* il riquadro dei preventivi: marroncino, si stacca dal verde senza gridare */
.ac-marrone { --tono: #b07a4f; --tono-scuro: #96603c; }
@media (max-width: 700px) { .ac-marrone .ac-icona { background: #f6eee7; } }

/* la fila delle pastiglie di filtro (preventivi) come le barre delle altre
   pagine: una fascia nel colore della categoria con dentro i pulsanti */
.contenuto[class*="cat-"] .filtri-chip {
  background: var(--cat); border-radius: 14px; padding: 10px 12px; gap: 8px; margin: 0 0 16px;
}
.contenuto[class*="cat-"] .filtri-chip .chip {
  background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #fff;
}
.contenuto[class*="cat-"] .filtri-chip .chip:hover { background: rgba(255, 255, 255, .3); }
.contenuto[class*="cat-"] .filtri-chip .chip.attivo { background: #fff; border-color: #fff; color: var(--cat-scuro); }
/* le news restano un marrone piu' chiaro, i preventivi piu' scuro: si distinguono */
.cat-news { --cat: #f28f0a; --cat-scuro: #b96b00; --cat-chiaro: #fff4e5; }
.tessera.cat-news .tz-etichetta { color: #b96b00; }

/* La nota della mappa nei preventivi: grande, centrata, marroncino su fondo chiaro */
.card-nuovo-prev .afg-nota {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  max-width: none; margin: 0 0 20px; padding: 22px 24px;
  background: #f7efe8; border: 2px solid #a9744a; border-radius: 18px;
  color: #74482b; font-size: 17px; line-height: 1.5; font-weight: 500;
}
.card-nuovo-prev .afg-nota strong { color: #74482b; }
.card-nuovo-prev .afn-icona {
  width: 58px; height: 58px; border-radius: 50%;
  background: #fff; color: #a9744a; border: 2px solid #e0cdbb;
}
.card-nuovo-prev .afn-icona .ico { width: 30px; height: 30px; }
@media (max-width: 640px) { .card-nuovo-prev .afg-nota { font-size: 15px; padding: 18px 16px; } }

/* La scheda del preventivo: il totale, i passi e i titoli nel marrone della categoria */
.cat-preventivi .wz-passo.attivo { background: var(--cat-chiaro); }
.cat-preventivi .wz-passo.attivo .wz-n { background: var(--cat); border-color: var(--cat); }
.cat-preventivi .wz-passo.attivo .wz-testo strong { color: var(--cat-scuro); }
.cat-preventivi .wz-passo.fatto .wz-n { background: var(--cat-chiaro); border-color: var(--cat); color: var(--cat-scuro); }
.cat-preventivi .riga-dati strong.grosso { color: var(--cat-scuro); }
.cat-preventivi .titolo-sezione > span:first-child { background: var(--cat-chiaro); }
.cat-preventivi .titolo-sezione > span:first-child .ico { color: var(--cat); }
.cat-preventivi .tab-righe tfoot th { background: var(--cat-chiaro); color: var(--cat-scuro); }
.cat-preventivi .riga-totale th { color: var(--cat-scuro); }
.cat-preventivi .titolo-pagina { color: var(--cat-scuro); }
.cat-preventivi .etichetta-misura { background: var(--cat-chiaro); border-color: #e0cdbb; color: var(--cat-scuro); }
.cat-preventivi .mp-modi .btn.acceso { background: var(--cat); border-color: var(--cat); }
.cat-preventivi input:focus, .cat-preventivi select:focus, .cat-preventivi textarea:focus {
  border-color: var(--cat); box-shadow: 0 0 0 4px rgba(169, 116, 74, .16);
}

/* I giorni della settimana come elenco che si apre e si spunta */
.scelta-giorni { border: 1.5px solid var(--bordo-forte); border-radius: 12px; background: #fff; margin: 0 0 4px; max-width: 420px; }
.scelta-giorni > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; cursor: pointer; list-style: none; font-size: 15px;
}
.scelta-giorni > summary::-webkit-details-marker { display: none; }
.scelta-giorni[open] { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(11, 107, 50, .12); }
.scelta-giorni[open] > summary { border-bottom: 1px solid var(--bordo); }
.gg-testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-freccia { color: var(--testo-tenue); font-size: 12px; transition: transform .15s ease; }
.scelta-giorni[open] .gg-freccia { transform: rotate(180deg); }
.gg-voci { display: flex; flex-direction: column; align-items: stretch; padding: 6px; }
.gg-voce {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; margin: 0; padding: 9px 12px; border-radius: 9px; cursor: pointer;
  font-size: 15px; font-weight: 400; color: var(--testo); text-transform: none;
}
.gg-voce:hover { background: var(--verde-tenue); }
.gg-voce:has(input:checked) { background: var(--verde-chiaro); color: var(--verde-scuro); font-weight: 600; }
.gg-voce input[type="checkbox"] { flex: none; margin: 0; }


/* =========================================================================
   v3.4 — i box a scomparti e il carico del materiale dentro l'elenco
   ========================================================================= */

/* --- il box a scomparti: la barra delle linguette e i pannelli ----------- */
.box-tab .tab-barra {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--bordo);
  margin: -4px 0 14px; padding-bottom: 10px;
}
.tab-voce {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 1px solid var(--bordo); border-radius: 999px;
  background: #fff; color: var(--testo-tenue);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.tab-voce .ico { width: 17px; height: 17px; }
.tab-voce:hover { border-color: var(--verde); color: var(--verde-scuro); }
.tab-voce.attivo { background: var(--verde); border-color: var(--verde); color: #fff; }
.tab-voce .tab-n {
  min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--grigio); color: var(--testo-tenue);
  font-size: 12px; font-weight: 700; text-align: center;
}
.tab-voce.attivo .tab-n { background: rgba(255, 255, 255, .24); color: #fff; }
.tab-pannello[hidden] { display: none; }

/* --- il carico dall'elenco: la scelta del lavoro sotto la riga ----------- */
tr.riga-scelta[hidden] { display: none; }
tr.riga-scelta > td { background: color-mix(in srgb, var(--cat, var(--verde)) 7%, #fff); border-top: 0; padding: 14px 16px 16px; }
.scelta-lavoro { display: block; }
.sl-domanda { margin: 0 0 10px; font-weight: 700; color: var(--cat-scuro, var(--verde-scuro)); }
.sl-vuoto { margin: 0; }
.sl-lavori { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-lavoro {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 10px 14px; border: 1.5px solid var(--bordo-forte); border-radius: 12px;
  background: #fff; cursor: pointer; font-weight: 500;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.sl-lavoro:hover { border-color: var(--cat, var(--verde)); }
.sl-lavoro input[type="radio"] { flex: none; margin: 0; }
.sl-nome { display: flex; flex-direction: column; line-height: 1.25; }
.sl-nome small { color: var(--testo-tenue); font-weight: 400; }
.sl-lavoro:has(input:checked) {
  border-color: var(--cat, var(--verde)); background: var(--cat-chiaro, var(--verde-chiaro));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat, var(--verde)) 14%, transparent);
}
.sl-scheda {
  display: flex; align-items: center; gap: 9px; margin: 12px 0 0;
  padding: 10px 12px; border: 1px solid #f0c9a6; border-radius: 10px;
  background: #fdf3e8; font-size: 14px;
}
.sl-piede { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.sl-resta { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 0 0; font-size: 14px; color: var(--testo-tenue); }
.sl-carica { letter-spacing: .04em; }

/* mentre si sceglie il lavoro, tutto il resto della pagina si schiarisce:
   resta acceso solo il materiale che stai caricando. La barra in alto non si
   tocca, altrimenti si vedrebbe il contenuto scorrerle dietro. */
body.carico-in-corso .contenuto > *,
body.carico-in-corso table.elenco tr { opacity: .3; transition: opacity .15s ease; }
body.carico-in-corso .contenuto > .card:has(.riga-in-carico) { opacity: 1; }
body.carico-in-corso .card:has(.riga-in-carico) > *:not(.tabella-scroll) { opacity: .3; transition: opacity .15s ease; }
body.carico-in-corso table.elenco tr.riga-in-carico { opacity: 1; }
body.carico-in-corso table.elenco tr.riga-in-carico > td { background: #fff; }
body.carico-in-corso table.elenco tr.riga-scelta.riga-in-carico > td { background: color-mix(in srgb, var(--cat, var(--verde)) 7%, #fff); }

@media (max-width: 700px) {
  /* le linguette su una riga sola, che scorre di lato: niente doppia fila */
  .box-tab .tab-barra {
    gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .box-tab .tab-barra::-webkit-scrollbar { display: none; }
  .tab-voce { flex: none; padding: 8px 11px; font-size: 13px; white-space: nowrap; }
  .sl-lavoro { flex: 1 1 45%; }
  .sl-piede .btn { flex: 1 1 auto; }
  .sl-resta { flex: 1 1 100%; margin: 0; }
}

/* =========================================================================
   v3.5 — i moduli che scendono sotto al pulsante
   ========================================================================= */
.pannello-form[hidden] { display: none; }
.pannello-form {
  margin: 6px 0 18px; padding: 18px 18px 6px;
  border: 1.5px solid var(--cat, var(--verde));
  border-radius: var(--r-l);
  background: color-mix(in srgb, var(--cat, var(--verde)) 5%, #fff);
  box-shadow: var(--ombra-1);
  animation: pf-scendi .18s ease;
}
@keyframes pf-scendi { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.pannello-form > .titolo-sezione { margin-top: 0; color: var(--cat, var(--verde-scuro)); }
.pannello-form > .titolo-sezione > span:first-child { background: color-mix(in srgb, var(--cat, var(--verde)) 14%, #fff); color: var(--cat, var(--verde)); }
.pannello-form .modulo-blocco { border-color: color-mix(in srgb, var(--cat, var(--verde)) 28%, #fff); }
.pannello-form .mb-titolo { color: var(--cat, var(--verde-scuro)); }
.pannello-form input:focus, .pannello-form select:focus, .pannello-form textarea:focus {
  border-color: var(--cat, var(--verde));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat, var(--verde)) 16%, transparent);
}
.pf-piede { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* mentre il modulo è aperto, il resto della pagina si schiarisce */
body.pannello-aperto .contenuto > * { opacity: .3; transition: opacity .15s ease; }
body.pannello-aperto .contenuto > .card:has(.pannello-form:not([hidden])) { opacity: 1; }
body.pannello-aperto .card:has(.pannello-form:not([hidden])) > *:not(.pannello-form):not(.testata-pagina) {
  opacity: .3; transition: opacity .15s ease;
}

/* =========================================================================
   v3.6 — la scheda prende il colore della sua categoria
   (commesse viola, sopralluoghi blu, segnalazioni rosso, preventivi marrone;
    per i lavori il colore e' il verde, quindi non cambia niente)
   ========================================================================= */
.contenuto[class*="cat-"] .scheda-testa { border-top-color: var(--cat); }
.contenuto[class*="cat-"] .scheda-testa h1 { color: var(--cat-scuro); }
.contenuto[class*="cat-"] .scheda-testa h1 > .ico,
.contenuto[class*="cat-"] .scheda-testa h1 > span > .ico { color: var(--cat); }
.contenuto[class*="cat-"] .scheda-testa h1 > .mono { background: var(--cat-chiaro); color: var(--cat-scuro); }
.contenuto[class*="cat-"] .scheda-testa .occhiello a { color: var(--cat); }
.contenuto[class*="cat-"] .scheda-testa .tessera { --tono: var(--cat); --tono-chiaro: var(--cat-chiaro); }
.contenuto[class*="cat-"] .scheda-testa .tz-etichetta { color: var(--cat-scuro); }
.contenuto[class*="cat-"] .scheda-testa .tz-icona .ico { color: var(--cat); }

/* i moduli di modifica dentro la scheda: titolo, icona, bordi e SALVA */
.contenuto[class*="cat-"] .card > .titolo-sezione { color: var(--cat-scuro); }
.contenuto[class*="cat-"] .card > .titolo-sezione > span:first-child {
  background: var(--cat-chiaro); color: var(--cat);
}
.contenuto[class*="cat-"] .modulo-blocco { border-color: color-mix(in srgb, var(--cat) 30%, #fff); }
.contenuto[class*="cat-"] .mb-titolo { color: var(--cat-scuro); }
.contenuto[class*="cat-"] input:focus,
.contenuto[class*="cat-"] select:focus,
.contenuto[class*="cat-"] textarea:focus {
  border-color: var(--cat);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 16%, transparent);
}

/* =========================================================================
   v3.7 — i sopralluoghi in blu anche fuori dalla loro pagina
   ========================================================================= */
/* nel calendario (settimana, tre giorni e mese) la voce del sopralluogo */
.cm-voce.sopralluogo { color: #3f4fd4; font-weight: 600; }
.calendario-mese td .cm-voce.sopralluogo,
.cal-cella .cm-voce.sopralluogo { background: #eaecfe; color: #2f3cb0; }
.cm-voce.sopralluogo .ico { color: #3f4fd4; }

/* l'elenco: la riga che si accende al passaggio prende il colore della sezione */
.contenuto[class*="cat-"] .sop-item:hover,
.contenuto[class*="cat-"] .sop-riga:hover { border-color: var(--cat); }
.contenuto[class*="cat-"] .sop-riga:hover { box-shadow: 0 0 0 3px var(--cat-chiaro), var(--ombra-2); }
.contenuto[class*="cat-"] .avanzamento i.on,
.contenuto[class*="cat-"] .sop-avanzamento i.on { background: var(--cat); }

/* il selettore fra segnalazione e sopralluogo prende il colore della scelta */
.contenuto[class*="cat-"] .seg a:hover, .contenuto[class*="cat-"] .seg button:hover {
  border-color: var(--cat); background: var(--cat-chiaro);
}
.contenuto[class*="cat-"] .seg a.attivo, .contenuto[class*="cat-"] .seg button.attivo {
  background: var(--cat-chiaro); color: var(--cat-scuro); border-color: var(--cat);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 14%, transparent);
}
.contenuto[class*="cat-"] .seg a.attivo .ico, .contenuto[class*="cat-"] .seg button.attivo .ico { color: var(--cat); }
.contenuto[class*="cat-"] .modulo-nuova h1 { color: var(--cat-scuro); }
.contenuto[class*="cat-"] .modulo-nuova h1 .ico { color: var(--cat); }
.contenuto[class*="cat-"] .btn-grande { background: var(--cat); border-color: var(--cat); }

/* il tasto marrone: porta al preventivo da qualunque pagina */
.btn-marrone {
  background: #96603c; border-color: #96603c; color: #fff;
  box-shadow: 0 6px 14px -8px rgba(116, 72, 43, .5);
}
.btn-marrone:hover { filter: brightness(1.08); }

/* =========================================================================
   v3.8 — la barra sempre in vista in fondo alla scheda
   ========================================================================= */
.barra-scheda {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 22px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--bordo);
  box-shadow: 0 -10px 30px -18px rgba(12, 38, 20, .5);
}
.app:has(.sidebar) ~ * .barra-scheda { left: 0; }
.barra-scheda .bs-destra { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.barra-scheda form { margin: 0; }
.barra-scheda .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
body:has(.barra-scheda) .app-corpo { padding-bottom: 96px; }
.btn-verde-bordo {
  background: #fff; border-color: var(--verde); color: var(--verde-scuro); box-shadow: none;
}
.btn-verde-bordo:hover { background: var(--verde-tenue); filter: none; }

@media (max-width: 700px) {
  /* sopra la barra di navigazione del telefono */
  .barra-scheda { bottom: calc(66px + env(safe-area-inset-bottom)); padding: 9px 12px; gap: 7px; }
  .barra-scheda .btn { padding: 9px 12px; font-size: 13.5px; }
  .barra-scheda .bs-indietro { padding: 9px 11px; }
  body:has(.barra-scheda) .app-corpo { padding-bottom: 150px; }
}

/* =========================================================================
   v3.9 — da dove nasce il preventivo, e il segno del PDF nell'elenco
   ========================================================================= */
.elenco-origini { display: flex; flex-direction: column; gap: 7px; max-height: 320px; overflow-y: auto; padding: 2px; }
.riga-origine {
  display: flex; align-items: center; gap: 11px; margin: 0;
  padding: 10px 12px; border: 1.5px solid var(--bordo); border-radius: 12px;
  background: #fff; cursor: pointer; font-weight: 400;
}
.riga-origine:hover { border-color: var(--cat, var(--verde)); }
.riga-origine:has(input:checked) {
  border-color: var(--cat, var(--verde)); background: var(--cat-chiaro, var(--verde-chiaro));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat, var(--verde)) 14%, transparent);
}
.riga-origine input[type="radio"] { flex: none; margin: 0; }
.ro-testo { display: flex; flex-direction: column; line-height: 1.3; }
.ro-testo small { color: var(--testo-tenue); }
.et-origine {
  flex: none; display: inline-block; padding: 4px 9px; border-radius: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #fff;
}
.et-richiesta   { background: var(--rosso); }
.et-segnalazione{ background: var(--blu); }
.et-lavoro      { background: var(--verde); }
.origine-scelta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.origine-scelta a { font-size: 13px; }
.campo-richiesta[hidden] { display: none; }

/* il segno del PDF nell'elenco dei preventivi */
.col-pdf { width: 54px; text-align: center; }
.segno-pdf {
  display: inline-block; padding: 3px 7px; border-radius: 5px;
  background: #fdecec; color: #9b2323; border: 1px solid #f3c9c9;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-decoration: none;
}
.segno-pdf:hover { background: #f9dede; }

/* =========================================================================
   v4.0 — gli avvisi: in cima alla home del cliente e nella loro pagina
   ========================================================================= */
.avv-tessere {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.avv-tessera {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border-radius: var(--r-l); text-decoration: none;
  background: #fff; border: 1px solid var(--bordo); border-left: 4px solid var(--c, var(--verde));
  box-shadow: var(--ombra-1); color: var(--testo);
  transition: transform .12s ease, box-shadow .14s ease;
}
.avv-tessera:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
.avt-stato { font-size: 12.5px; font-weight: 700; color: var(--c, var(--verde)); letter-spacing: .01em; }
.avt-titolo { font-size: 15px; font-weight: 600; line-height: 1.3; }
.avt-meta { font-size: 12px; color: var(--testo-tenue); }
.avv-urgente { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent), var(--ombra-1); }

.elenco-avvisi { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.elenco-avvisi > li > a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--bordo); border-radius: var(--r); background: #fff;
  text-decoration: none; color: var(--testo); box-shadow: var(--ombra-1);
  transition: border-color .12s ease, box-shadow .14s ease;
}
.elenco-avvisi > li > a:hover { border-color: var(--c); box-shadow: var(--ombra-2); }
.av-pallino { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.av-urgente .av-pallino { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.av-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.av-riga1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.av-stato { font-weight: 700; color: var(--c); font-size: 14px; }
.av-codice { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--testo-tenue); }
.av-riga2 { font-size: 14.5px; font-weight: 500; }
.av-riga3 { font-size: 12.5px; color: var(--testo-tenue); }
.av-freccia { flex: none; color: var(--testo-tenue); font-size: 18px; }
.filtri-avvisi .fa-cerca { min-width: 240px; flex: 1 1 240px; }

@media (max-width: 700px) {
  .avv-tessere { grid-template-columns: 1fr; gap: 9px; }
  .avv-tessera { padding: 12px 13px; }
}

/* dal preventivo alla richiesta di sopralluogo: il posto va visto prima */
.prima-sopralluogo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 16px; padding: 12px 16px;
  background: var(--blu-chiaro); border: 1px solid #cfe0fb; border-radius: 14px;
  color: var(--blu-scuro); font-weight: 500;
}

/* =========================================================================
   v4.1 — Documenti: cartelle strette a sinistra, documenti subito a destra
   ========================================================================= */
.doc-impianto { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.doc-lato { position: sticky; top: 14px; }
.doc-lato .cartelle { display: flex; flex-direction: column; gap: 7px; margin: 0; }
/* le cartelle sono un terzo di prima: nome, conteggio e via */
.doc-lato .cartella {
  padding: 10px 12px; border-radius: 12px; min-height: 0; gap: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.doc-lato .cartella .ca-testa strong { font-size: 14px; }
.doc-lato .cartella .ca-testa small { font-size: 11.5px; }
.doc-lato .cartella .ca-icona { font-size: 18px; width: auto; height: auto; }
.doc-lato .cartella .ca-icona .ico { width: 20px; height: 20px; }
.doc-principale { min-width: 0; }
.doc-principale > .card:first-child { margin-top: 0; }

/* i tag sulla scheda del documento e il pannellino "sposta" */
.doc-tag { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.doc-tag .tag {
  padding: 3px 8px; border-radius: 999px; background: var(--verde-tenue);
  color: var(--verde-scuro); font-size: 11.5px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--bordo);
}
.doc-tag .tag:hover { background: var(--verde-chiaro); border-color: var(--verde); }
.doc-sposta { display: inline-block; }
.doc-sposta > summary { list-style: none; cursor: pointer; }
.doc-sposta > summary::-webkit-details-marker { display: none; }
.ds-form {
  margin-top: 8px; padding: 12px; border: 1px solid var(--bordo-forte); border-radius: 12px;
  background: #fff; display: flex; flex-direction: column; gap: 8px; min-width: 230px;
}
.ds-form label { font-size: 12px; font-weight: 600; }
.filtri-doc .fd-cerca { min-width: 220px; flex: 1 1 220px; }

@media (max-width: 980px) {
  .doc-impianto { grid-template-columns: 1fr; }
  .doc-lato { position: static; }
  .doc-lato .cartelle { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .doc-lato .cartella { flex: 0 0 auto; min-width: 190px; }
}

/* =========================================================================
   v4.2 — il calendario è la pagina degli appuntamenti: cornice in blu
   ========================================================================= */
.cat-sopralluoghi .cal-oggi { border-color: var(--cat); box-shadow: 0 0 0 2px var(--cat) inset; }
.cat-sopralluoghi .cal-pieno { background: var(--cat-chiaro); border-color: color-mix(in srgb, var(--cat) 25%, #fff); }
.cat-sopralluoghi .cal-numero { color: var(--cat-scuro); }
.cat-sopralluoghi .cal-ore { color: var(--cat); }
.cat-sopralluoghi .cm-oggi { background: var(--cat) !important; }
.cat-sopralluoghi .calendario-mese th.oggi .cm-num { background: var(--cat); }
.cat-sopralluoghi .cal-comandi .segmenti a.attivo,
.cat-sopralluoghi .sg-voce.attivo { background: var(--cat); border-color: var(--cat); }
.cat-sopralluoghi .cal-giorno.oggi, .cat-sopralluoghi td.oggi { outline-color: var(--cat); }
.cat-sopralluoghi .calendarietto .oggi { color: var(--cat-scuro); }
.cat-sopralluoghi .titolo-sezione > span:first-child { background: var(--cat-chiaro); color: var(--cat); }

/* Dentro una sezione colorata, anche i pulsanti e le barre di avanzamento
   prendono quel colore: nei lavori il colore è il verde, quindi lì non
   cambia niente. */
.contenuto[class*="cat-"] .btn-verde,
.contenuto[class*="cat-"] .btn-invia,
.contenuto[class*="cat-"] .btn-grande {
  background: var(--cat); border-color: var(--cat);
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--cat) 55%, transparent);
}
.contenuto[class*="cat-"] .btn-verde-bordo {
  background: #fff; border-color: var(--cat); color: var(--cat-scuro);
}
.contenuto[class*="cat-"] .btn-verde-bordo:hover { background: var(--cat-chiaro); }
.contenuto[class*="cat-"] .btn-grey:hover { background: var(--cat-chiaro); border-color: var(--cat); color: var(--cat-scuro); }
.contenuto[class*="cat-"] .avanzamento i.on,
.contenuto[class*="cat-"] .sop-avanzamento i.on,
.contenuto[class*="cat-"] .barra-unica i { background: var(--cat); }
.contenuto[class*="cat-"] .timeline .dot.on { background: var(--cat); box-shadow: 0 0 0 4px var(--cat-chiaro); }
.contenuto[class*="cat-"] .timeline li:not(:last-child)::before { background: var(--cat-chiaro); }
.contenuto[class*="cat-"] .spunta input:checked,
.contenuto[class*="cat-"] input[type="checkbox"]:checked,
.contenuto[class*="cat-"] input[type="radio"]:checked {
  background-color: var(--cat); border-color: var(--cat);
}
.contenuto[class*="cat-"] .stato-passo.fatto { color: var(--cat-scuro); }

/* Tutti i pulsanti pieni di una sezione colorata prendono quel colore.
   Restano com'erano: il rosso (che vuol dire "attenzione"), il chiaro con
   bordo, e quelli già del colore della categoria. */
.contenuto[class*="cat-"] .btn:not(.btn-rosso):not(.btn-grey):not(.btn-cat):not(.btn-cat-bordo):not(.btn-marrone):not(.btn-viola):not(.btn-verde-bordo):not(.btn-cestino):not(.btn-verde-chiaro):not(.btn-blu-fisso):not(.btn-verde-fisso):not(.btn-nero) {
  background: var(--cat); border-color: var(--cat); color: #fff;
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--cat) 55%, transparent);
}

/* =========================================================================
   v4.3 — due colori nuovi: il magazzino (ciano scuro) e i documenti (antracite)
   ========================================================================= */
:root { --ciano: #0f8b86; --ciano-scuro: #0a635f; --ciano-chiaro: #e3f5f4;
        --nero-doc: #37474f; --nero-doc-scuro: #22303a; --nero-doc-chiaro: #eceff1; }
.cat-magazzino  { --cat: #0f8b86; --cat-scuro: #0a635f; --cat-chiaro: #e3f5f4; }
.cat-documenti  { --cat: #37474f; --cat-scuro: #22303a; --cat-chiaro: #eceff1; }
.tessera-ciano  { --tono: var(--ciano);    --tono-chiaro: var(--ciano-chiaro); }
.tessera-nero   { --tono: var(--nero-doc); --tono-chiaro: var(--nero-doc-chiaro); }
.tessera.cat-magazzino .tz-etichetta { color: var(--ciano-scuro); }
.tessera.cat-documenti .tz-etichetta { color: var(--nero-doc-scuro); }
.ac-ciano { --tono: #22a49e; --tono-scuro: var(--ciano-scuro); }
.ac-nero  { --tono: #55707e; --tono-scuro: var(--nero-doc-scuro); }
@media (max-width: 700px) {
  .ac-ciano .ac-icona { background: var(--ciano-chiaro); }
  .ac-nero .ac-icona  { background: var(--nero-doc-chiaro); }
}
.btn-ciano { background: var(--ciano); border-color: var(--ciano); box-shadow: 0 6px 14px -8px rgba(15, 139, 134, .5); }

/* nel magazzino il verde lascia il posto al ciano scuro, dappertutto */
.cat-magazzino .tessera-verde { --tono: var(--cat); --tono-chiaro: var(--cat-chiaro); }
/* Nella colonna "Dov'è" i cartellini sono pieni: la scritta ci va bianca,
   se no il testo scuro sul fondo pieno non si legge. */
.cat-magazzino table.elenco .badge {
  background: var(--c, var(--cat)); color: #fff;
}
.cat-magazzino table.elenco .badge .ico { color: #fff; }

/* la tessera dei preventivi: marrone, che non si confonda con le pratiche */
.tessera-marrone { --tono: #96603c; --tono-chiaro: #f6eee7; }
.tessera.cat-preventivi .tz-etichetta { color: #74482b; }
.tessera.cat-magazzino .tz-icona .ico { color: var(--ciano); }
.tessera.cat-documenti .tz-icona .ico { color: var(--nero-doc); }

/* =========================================================================
   v4.4 — costo orario (operai e mezzi) e nuova lavorazione dal prezzario
   ========================================================================= */
.costo-orario > summary { list-style: none; cursor: pointer; }
.costo-orario > summary::-webkit-details-marker { display: none; }
.co-valore { font-weight: 600; border-bottom: 1px dashed var(--bordo-forte); display: inline-block; }
.co-valore:hover { color: var(--cat, var(--verde-scuro)); border-color: var(--cat, var(--verde)); }
.co-form {
  margin-top: 8px; padding: 12px; border: 1px solid var(--bordo-forte); border-radius: 12px;
  background: #fff; min-width: 230px; box-shadow: var(--ombra-2);
}
.co-form .small { font-size: 12px; }
.voce-modifica { display: inline-block; margin-left: 8px; }
.voce-modifica > summary { list-style: none; cursor: pointer; }
.voce-modifica > summary::-webkit-details-marker { display: none; }
.vm-form, .vm-togli {
  margin-top: 8px; padding: 12px; border: 1px solid var(--bordo-forte); border-radius: 12px;
  background: #fff; display: flex; flex-direction: column; gap: 8px; min-width: 260px;
}
.vm-togli { border-color: #f3c9c9; background: var(--rosso-chiaro); }
.vm-form label { font-size: 12px; font-weight: 600; }
.lav-nota {
  margin: 6px 0 0; padding: 9px 12px; border-radius: 10px;
  background: var(--verde-tenue); border: 1px solid var(--bordo); font-size: 13.5px;
}
.nl-nuova { margin-top: 12px; }

/* la nota sugli sconti concordati, sotto la simulazione del cliente */
.nota-sconti {
  margin: 8px 0 0; padding: 10px 13px; border-radius: 11px;
  background: var(--blu-chiaro); border: 1px solid #cfe0fb;
  color: var(--blu-scuro); font-size: 13px;
}

/* la commessa dentro un appalto: la riga sotto al titolo e il riquadro */
.riga-appalto { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 6px 0 0; font-size: 14px; }
.blocco-appalto {
  margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--bordo-forte); background: var(--grigio);
}
.blocco-appalto p { margin: 0 0 10px; }
.blocco-appalto form { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 0; }
.blocco-appalto select { max-width: 340px; }

/* il preventivo legato al lavoro spot, e i dati della commessa nella scheda */
.prev-legato { margin: 0 0 10px; font-size: 14px; }
.fp-tipo-riga { margin: 0 0 6px; font-size: 15px; }
.kv-commessa { margin: 8px 0 10px; display: grid; grid-template-columns: auto 1fr; }
.kv-commessa dt { font-size: 11.5px; }
.kv-commessa dd { margin: 0 0 4px; font-size: 14px; }

/* il tasto Commesse resta viola anche dentro la sezione verde dei lavori */
.btn-viola { background: #9c4f96; border-color: #9c4f96; color: #fff; box-shadow: 0 6px 14px -8px rgba(156, 79, 150, .5); }
.et-commessa { background: #9c4f96; }

/* =========================================================================
   v4.5 — la home dell'amministratore: il banco delle azioni e la giornata
   ========================================================================= */
.card-banco { padding-bottom: 10px; }
.titolo-banco { margin: 2px 0 0; font-size: 21px; }
.banco { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 6px; }
.banco-gruppo { border: 1px solid var(--bordo); border-radius: var(--r-l); padding: 12px 13px; background: #fff; }
.bg-titolo {
  margin: 0 0 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--testo-tenue);
}
.bg-voci { display: flex; flex-direction: column; gap: 5px; }
.bg-voce {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px;
  text-decoration: none; color: var(--testo); font-weight: 500; font-size: 14.5px;
  transition: background .12s ease, transform .1s ease;
}
.bg-voce:hover { background: var(--verde-tenue); transform: translateX(2px); }
.bgv-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center;
           border-radius: 9px; background: var(--grigio); font-size: 15px; }
.bg-voce .ico { width: 17px; height: 17px; }
.bgv-nome { flex: 1; }
.bgv-n {
  flex: none; min-width: 22px; padding: 2px 7px; border-radius: 999px;
  background: var(--rosso); color: #fff; font-size: 12px; font-weight: 700; text-align: center;
}
/* ogni gruppo ha il colore della sua sezione */
.bg-lavori .bgv-ico     { background: var(--verde-chiaro); color: #0b6b32; }
.bg-commesse .bgv-ico   { background: #f7ecf6; color: #7d3d78; }
.bg-preventivi .bgv-ico { background: #f6eee7; color: #74482b; }
.bg-pratiche .bgv-ico   { background: #fdece9; color: #c33a28; }
.bg-campo .bgv-ico      { background: #e3f5f4; color: #0a635f; }
.bg-lavori .bg-voce:hover     { background: var(--verde-chiaro); }
.bg-commesse .bg-voce:hover   { background: #f7ecf6; }
.bg-preventivi .bg-voce:hover { background: #f6eee7; }
.bg-pratiche .bg-voce:hover   { background: #fdece9; }
.bg-campo .bg-voce:hover      { background: #e3f5f4; }

/* --- la giornata: una riga per lavoro, con chi ci va e a che ora --------- */
.righe-giornata { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.riga-giornata {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--bordo); border-radius: var(--r); background: #fff;
}
.rg-testa { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rg-titolo { font-weight: 600; text-decoration: none; color: var(--testo); }
.rg-titolo:hover { color: var(--verde-scuro); }
.rg-cliente { font-size: 12.5px; color: var(--testo-tenue); }
.rg-chi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; }
.rg-persona {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px;
  border-radius: 999px; background: var(--verde-chiaro); color: var(--verde-scuro);
  font-size: 13px; font-weight: 600;
}
.rg-persona small { font-weight: 500; opacity: .8; }
.rg-persona form { margin: 0; }
.rg-x {
  border: 0; background: rgba(0, 0, 0, .08); color: inherit; cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%; line-height: 1; font-size: 13px;
}
.rg-x:hover { background: var(--rosso); color: #fff; }
.rg-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.rg-form select { min-width: 150px; }
.rg-form input[type="time"] { width: 108px; }
.avviso-sovrapposto {
  margin: 10px 0 14px; padding: 14px 16px; border-radius: 14px;
  background: var(--arancio-chiaro); border: 1px solid #f3d3a4; border-left: 5px solid var(--arancio);
}
.avviso-sovrapposto ul { margin: 6px 0 10px; padding-left: 20px; }
.as-tasti { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* --- la giornata dell'operaio, come il disegno: 7.00 → 19.00 ------------- */
.giornata-operaio { margin: 14px 0 6px; }
.go-nome { margin: 0 0 18px; font-size: 17px; letter-spacing: .02em; }
.go-barra { position: relative; padding: 26px 0 10px; }
.go-ora { position: absolute; top: 0; font-size: 13px; color: var(--testo); }
.go-inizio { left: 0; }
.go-fine { right: 0; }
.go-pista {
  position: relative; height: 62px; border-left: 2px solid #1b2620; border-right: 2px solid #1b2620;
  background: #fff;
}
.go-pista::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  border-top: 1.5px solid #1b2620; border-bottom: 1.5px solid #1b2620;
}
.go-blocco {
  position: absolute; top: 0; bottom: 0; background: #cfe6f7;
  border-left: 2px solid #1b2620; border-right: 2px solid #1b2620;
  display: grid; place-items: center; padding: 0 6px;
}
.gob-testo {
  font-size: 13px; text-align: center; line-height: 1.2; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.gob-ora { position: absolute; top: -20px; font-size: 12px; color: var(--testo-tenue); white-space: nowrap; }
.gob-dal { left: -2px; }
.gob-al { right: -2px; }

@media (max-width: 700px) {
  .banco { grid-template-columns: 1fr; gap: 12px; }
  .riga-giornata { grid-template-columns: 1fr; }
  .rg-form { width: 100%; }
  .rg-form select, .rg-form input[type="time"] { flex: 1 1 100px; min-width: 0; }
  .go-pista { height: 76px; }
  .gob-testo { font-size: 11.5px; }
}

/* il tasto con la tendina (Nuovo lavoro: lavoro o lavoro spot) */
.tasto-menu { position: relative; display: inline-block; }
.tasto-menu > summary { list-style: none; cursor: pointer; }
.tasto-menu > summary::-webkit-details-marker { display: none; }
.tm-tendina {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 260px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: #fff; border: 1px solid var(--bordo); border-radius: 14px; box-shadow: var(--ombra-3);
}
.tm-tendina a {
  display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--testo);
}
.tm-tendina a:hover { background: var(--verde-tenue); }
.tm-tendina strong { font-size: 14.5px; color: var(--verde-scuro); }
.tm-tendina small { font-size: 12px; color: var(--testo-tenue); line-height: 1.35; }
.testata-sola { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.testata-sola .titolo-pagina { margin: 0; }
.row-btn-home { margin-bottom: 18px; }

/* l'interruttore delle azioni veloci, uguale a quello del Master Mode */
.switch-veloci { border: 0; background: none; cursor: pointer; font: inherit; padding: 0;
                 display: inline-flex; align-items: center; gap: 10px; }
.switch-veloci .ms-testo { text-align: left; }

/* la cronologia del lavoro, aperta dalla riga della giornata */
.rg-riga1 { display: flex; align-items: center; gap: 8px; }
.rg-storia-tasto {
  border: 1px solid var(--bordo); background: #fff; border-radius: 8px; cursor: pointer;
  width: 28px; height: 28px; display: grid; place-items: center; font-size: 14px; line-height: 1;
}
.rg-storia-tasto:hover, .rg-storia-tasto.aperto { border-color: var(--verde); background: var(--verde-tenue); }
.rg-storia { grid-column: 1 / -1; margin-top: 4px; padding: 12px 14px;
             background: var(--grigio); border-radius: 12px; }
.storia-elenco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.storia-elenco li {
  display: grid; grid-template-columns: 108px 1fr; gap: 10px; align-items: baseline;
  padding-left: 12px; border-left: 3px solid var(--bordo-forte); font-size: 13.5px;
}
.se-quando { color: var(--testo-tenue); font-size: 12.5px; }
.se-quando small { margin-left: 4px; }
.storia-elenco li.se-nascita      { border-left-color: var(--testo-tenue); }
.storia-elenco li.se-assegnazione { border-left-color: var(--verde); }
.storia-elenco li.se-tolta        { border-left-color: var(--bordo-forte); color: var(--testo-tenue); }
.storia-elenco li.se-giornata     { border-left-color: #128a46; }
.storia-elenco li.se-materiale    { border-left-color: var(--ciano); }
.storia-elenco li.se-preventivo   { border-left-color: #96603c; }
.storia-elenco li.se-fine         { border-left-color: var(--rosso); }
@media (max-width: 700px) { .storia-elenco li { grid-template-columns: 1fr; gap: 2px; } }

/* il calendarietto dentro le azioni veloci */
.bg-calendario .cm-griglia { margin-top: 2px; }
.bg-calendario .cm-oggi-btn { margin-top: 10px; width: 100%; }

/* il tempo dei prossimi giorni dentro le azioni veloci: dieci per riga */
.bg-meteo { grid-column: span 2; }
.meteo-mese { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.mm-giorno {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 3px; border-radius: 10px; background: var(--grigio);
  text-decoration: none; color: var(--testo); font-size: 11px; line-height: 1.2;
}
.mm-giorno:hover { background: var(--verde-tenue); }
.mm-bagnato { background: var(--blu-chiaro); }
.mm-bagnato:hover { background: #dbe8fd; }
.mm-gg { color: var(--testo-tenue); font-size: 10.5px; }
.mm-ico { font-size: 16px; }
.mm-t { font-weight: 700; font-size: 12px; }
.mm-t small { font-weight: 500; color: var(--testo-tenue); margin-left: 2px; }
.mm-nota { grid-column: 1 / -1; margin: 4px 0 0; font-size: 11.5px; }
@media (max-width: 1100px) { .bg-meteo { grid-column: span 1; } .meteo-mese { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 700px) { .meteo-mese { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================================
   v4.1b — ultimi ritocchi di colore
   ========================================================================= */
/* il tasto nero: è il colore dei documenti */
.btn-nero {
  background: var(--nero-doc); border-color: var(--nero-doc); color: #fff;
  box-shadow: 0 6px 14px -8px rgba(55, 71, 79, .5);
}
.btn-nero:hover { filter: brightness(1.12); }
.contenuto[class*="cat-"] .btn-nero { background: var(--nero-doc); border-color: var(--nero-doc); }
.contenuto[class*="cat-"] .btn-ciano { background: var(--ciano); border-color: var(--ciano); }

/* "Carica un documento" in nero, come la sezione */
.doc-crea-nero {
  background: linear-gradient(135deg, #55707e, var(--nero-doc));
  box-shadow: 0 14px 30px -14px rgba(34, 48, 58, .6);
}
.doc-crea-nero:hover { box-shadow: 0 18px 36px -14px rgba(34, 48, 58, .6); }

/* la cartella aperta: fondo pieno e scritta bianca, non solo il bordo */
.cartella.aperta {
  background: var(--tono); border-color: var(--tono); color: #fff;
  box-shadow: 0 14px 30px -16px rgba(20, 40, 28, .55);
}
.cartella.aperta .ca-testa strong,
.cartella.aperta .ca-testa small,
.cartella.aperta .ca-icona,
.cartella.aperta .ca-icona .ico { color: #fff; }
.cartella.aperta .ca-testa small { opacity: .85; }
.cartella.aperta .ca-icona { background: rgba(255, 255, 255, .18); }

/* la riga di sinistra del riquadro "Documenti in scadenza": nera come l'archivio */
.tessera.cat-documenti::after,
.tessera-nero::after {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 4px; border-radius: 0 3px 3px 0; background: var(--nero-doc);
}
.tessera { position: relative; }

/* la firma sotto le foto, nella pagina di accesso */
.login-lato { position: relative; display: flex; flex-direction: column; }
.login-firma {
  margin: 14px 0 0; text-align: center; color: #fff; font-size: 12.5px;
  letter-spacing: .02em; opacity: .92;
}

/* =========================================================================
   v4.2 — la "i" dei riquadri, le carte sfumate e la firma RX2
   ========================================================================= */
/* il tasto informazioni nell'angolo del riquadro */
.tz-info {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--bordo-forte); background: #fff; color: var(--testo-tenue);
  font-family: var(--serif, Georgia, serif); font-size: 13px; font-weight: 700; font-style: italic;
  line-height: 1; display: grid; place-items: center;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.tz-info:hover { background: var(--nero-doc); border-color: var(--nero-doc); color: #fff; }

/* il riquadro che si apre sotto, con la crocetta rossa */
.card-scadenze[hidden] { display: none; }
.card-scadenze { border-left: 4px solid var(--nero-doc); }
.card-scadenze .testata-pagina { align-items: flex-start; }
.chiudi-info {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; flex: none;
  border: 1px solid #f3c9c9; background: var(--rosso-chiaro); color: var(--rosso);
  font-size: 19px; line-height: 1; display: grid; place-items: center;
}
.chiudi-info:hover { background: var(--rosso); color: #fff; border-color: var(--rosso); }

/* le due carte grandi della home: titolo colorato e sfumatura d'angolo */
.card-sfumata { position: relative; overflow: hidden; }
.card-sfumata::before {
  content: ""; position: absolute; left: 0; top: 0; width: 62%; height: 68%;
  background: radial-gradient(120% 110% at 0% 0%, var(--sf), transparent 68%);
  pointer-events: none;
}
.card-sfumata > * { position: relative; }
.sf-blu   { --sf: rgba(63, 79, 212, .16); }
.sf-verde { --sf: rgba(18, 138, 70, .16); }
.titolo-sezione.ts-blu { color: var(--blu-scuro); }
.titolo-sezione.ts-blu > span:first-child { background: var(--blu-chiaro); color: var(--blu); }
.titolo-sezione.ts-verde { color: var(--verde-scuro); }
.titolo-sezione.ts-verde > span:first-child { background: var(--verde-chiaro); color: var(--verde); }

/* il piede: il marchio di chi l'ha fatto, centrato sopra la riga */
.fondo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fondo-rx2 { display: block; line-height: 0; opacity: .9; transition: opacity .14s ease; }
.fondo-rx2:hover { opacity: 1; }
.fondo-rx2 img { display: block; width: 132px; height: auto; }
.fondo-riga { font-size: 12.5px; color: var(--testo-tenue); text-align: center; }

/* nella pagina di accesso: tutto un po' più in alto, il marchio sotto */
.login-card { padding-top: 26px; }
.lc-logo { margin-top: 0; }
.lc-rx2 { display: block; margin: 22px auto 0; line-height: 0; width: 118px; opacity: .85; }
.lc-rx2 img { display: block; width: 100%; height: auto; }
/* il logo dell'app più in alto e più compatto, per far posto al marchio sotto */
.login-card { padding: 26px 48px 30px; }
.lc-logo { margin: 0 auto 22px; }
.lc-titolo { margin: 0 0 20px; }

/* il blu vero: serve dove il colore vuol dire "sopralluogo", anche dentro una
   pagina di un'altra categoria (in segnalazioni il rosso è di casa). */
.btn-blu-fisso, .btn-blu-fisso:hover {
  background: var(--blu); border-color: var(--blu); color: #fff;
  box-shadow: 0 6px 14px -8px rgba(47, 111, 214, .5);
}
.btn-blu-fisso:hover { filter: brightness(1.12); }

/* il verde vero: il pulsante che riporta ai Lavori resta verde anche dentro
   una pagina di un'altra categoria (le commesse sono viola). */
.btn-verde-fisso, .btn-verde-fisso:hover {
  background: var(--verde); border-color: var(--verde); color: #fff;
  box-shadow: 0 6px 14px -8px var(--verde-ombra);
}
.btn-verde-fisso:hover { filter: brightness(1.12); }

/* la "i" sta appesa alla sua tessera, non alla griglia: serve un guscio */
.tz-guscio { position: relative; display: grid; }
.tz-guscio > .tessera { width: 100%; height: 100%; }

/* =========================================================================
   v4.5 — il magazzino: i riquadri in cima filtrano, e la consegna al
   meccanico passa da una finestra con la nota e il documento
   ========================================================================= */

/* i tre riquadri sono bottoni veri: si illuminano al passaggio e restano
   accesi finche' quel filtro e' quello scelto */
.tessere-mini a.tessera { text-decoration: none; cursor: pointer; }
.tessere-mini a.tessera:hover { transform: translateY(-1px); }
.tessere-mini a.tessera.tz-scelta {
  border-color: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent);
}
.tessere-mini a.tessera.tz-scelta::after {
  content: '×'; position: absolute; top: 6px; right: 9px;
  font-size: 15px; line-height: 1; opacity: .55;
}
.tessere-mini a.tessera { position: relative; }

/* la finestra della consegna */
.modale[hidden] { display: none; }
.modale { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; }
.modale-fondo { position: absolute; inset: 0; background: rgba(12, 28, 18, .45); backdrop-filter: blur(2px); }
.modale-corpo {
  position: relative; width: min(520px, 100%); max-height: 88vh; overflow: auto;
  background: var(--sfondo-card, #fff); border: 1px solid var(--bordo); border-radius: 16px;
  padding: 20px 22px 18px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45);
}
.modale-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modale-testa h2 { margin: 0 0 6px; font-size: 19px; }
.modale-corpo label { display: block; margin-top: 14px; }
.modale-corpo textarea { width: 100%; }
body.con-modale { overflow: hidden; }

/* la nota che l'amministratore lascia al meccanico */
.ll-consegna {
  display: block; margin-top: 4px; font-size: 13px; color: var(--testo-tenue);
  border-left: 3px solid var(--arancio, #e07b00); padding-left: 8px;
}
.ll-lato { display: flex; align-items: center; gap: 8px; flex: none; }

/* l'appalto della commessa ora e' una card sua, sotto la testa della scheda:
   niente riquadro dentro il riquadro, e il bordo viola che dice di che parla */
.card.blocco-appalto {
  margin-top: 0; padding: 18px 20px; background: var(--sfondo-card, #fff);
  border-left: 4px solid var(--viola, #9c4f96);
}
.card.blocco-appalto .titolo-sezione { margin-top: 0; }
.card.blocco-appalto p { margin: 0 0 12px; }

/* il nero dei rapportini deve restare nero anche dentro una pagina colorata,
   e nell'avviso "il PDF e' pronto" sta in riga col testo */
.flash .btn-nero { margin-left: 8px; vertical-align: baseline; }

/* le segnalazioni sono rosse anche in home: sfumatura d'angolo e titolo */
.sf-rosso { --sf: rgba(214, 69, 69, .16); }
.titolo-sezione.ts-rosso { color: #a02b2b; }
.titolo-sezione.ts-rosso > span:first-child { background: var(--rosso-chiaro); color: var(--rosso); }

/* =========================================================================
   v4.6 — ogni riquadro si piega: freccetta in alto a destra
   ========================================================================= */
.card { position: relative; }
.card-piega {
  width: 28px; height: 28px; flex: none; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--bordo-forte); background: #fff; color: var(--testo-tenue);
  font-size: 13px; line-height: 1; display: grid; place-items: center; padding: 0;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .16s ease;
}
.card-piega:hover { background: var(--verde-tenue); border-color: var(--verde); color: var(--verde-scuro); }
.card-piega span { display: block; transition: transform .16s ease; }
/* la freccia guarda in su quando il riquadro è aperto, in giù quando è chiuso */
.card:not(.card-chiusa) > .card-piega span,
.card:not(.card-chiusa) .card-piega span { transform: rotate(180deg); }
/* quando non c'è la fila dei pulsanti, la freccetta sta nell'angolo */
.card > .card-piega { position: absolute; top: 14px; right: 16px; z-index: 3; }

/* piegato: resta solo la testa (titolo e pulsanti), il resto sparisce */
.card-chiusa > *:not(.testata-pagina):not(h1):not(h2):not(.card-piega) { display: none !important; }
.card-chiusa { padding-bottom: 14px; }
.card-chiusa > .testata-pagina { margin-bottom: 0; }
.card-chiusa > h1, .card-chiusa > h2 { margin-bottom: 0; }

/* =========================================================================
   v4.7 — le azioni veloci diventano una finestra sopra la pagina
   ========================================================================= */
.modale-banco .banco-corpo { width: min(1080px, 100%); padding: 20px 24px 22px; }
.modale-banco .modale-testa { align-items: flex-start; margin-bottom: 14px; }
.modale-banco .titolo-banco { margin: 0; }
.modale-banco .occhiello { margin: 0 0 2px; }
.modale-banco .banco { margin: 0; }
/* dentro la finestra il tasto non fa da interruttore: dice solo com'è */
.switch-veloci .sv-stato { text-transform: none; }
@media (max-width: 700px) {
  .modale-banco .banco-corpo { padding: 16px 14px 18px; max-height: 92vh; }
}

/* =========================================================================
   v5.0 — RESTYLING OTTOBRE 2026 (anteprime approvate da Robi il 03-10-2026)
   Menu e testata grigio antracite, voce attiva a pillola bianca, sfondo
   grigio-verde sfumato, barra dei filtri colorata appesa sotto la testata,
   tabelle con intestazione scura, tessere piene o bianche nel colore della
   sezione. Stessi nomi di classe di prima: e' uno strato sopra il resto.
   ========================================================================= */

/* ---------- 1. colori ---------- */
:root {
  --ink-1: #1E2521; --ink-2: #2A332E; --ink-3: #364039;
  --lime: #A6D94A;
  /* il verde scuro di menu e testata (prima era l'antracite) */
  --scuro-1: #0E3A24; --scuro-2: #134A2F; --scuro-3: #1A5C3A;
  --testo: #1B2620; --testo-tenue: #5A675F; --testo-2: #36423B;
  --bordo: #E4EAE6; --bordo-forte: #CBD6CF; --fondo-campo: #F7F9F8;
  --ombra-sup: 0 1px 3px rgba(20, 28, 23, .09), 0 7px 18px -9px rgba(20, 28, 23, .4);
  --rosso: #C63A32; --rosso-scuro: #8E1F1F; --rosso-chiaro: #FDECEC;
  --ciano: #0F7C78; --ciano-scuro: #0A5754; --ciano-chiaro: #E0F3F1;
  --nero-doc: #2A332E; --nero-doc-scuro: #1B2620; --nero-doc-chiaro: #ECEFED;
  --sidebar-w: 248px; --topbar-h: 72px;
}
/* nelle pagine senza una sezione il colore e' il verde (specificita' zero:
   le classi .cat-* qui sotto vincono sempre) */
:where(.contenuto, .modale, #vic-ai) {
  --cat: #17803F; --cat-scuro: #0B6B32; --cat-chiaro: #E3F4EA; --cat-tenue: #7BD08F;
}
.cat-lavori       { --cat: #17803F; --cat-scuro: #0B6B32; --cat-chiaro: #E3F4EA; --cat-tenue: #7BD08F; }
.cat-segnalazioni { --cat: #C63A32; --cat-scuro: #8E1F1F; --cat-chiaro: #FDECEC; --cat-tenue: #F08A80; }
.cat-commesse     { --cat: #944A92; --cat-scuro: #6B2F69; --cat-chiaro: #F6EAF5; --cat-tenue: #D29AD0; }
.cat-sopralluoghi { --cat: #3F48CC; --cat-scuro: #2A3193; --cat-chiaro: #ECEDFC; --cat-tenue: #9AA1F5; }
.cat-preventivi   { --cat: #8B5A3C; --cat-scuro: #6A4129; --cat-chiaro: #F6ECE4; --cat-tenue: #D9A982; }
.cat-magazzino    { --cat: #0F7C78; --cat-scuro: #0A5754; --cat-chiaro: #E0F3F1; --cat-tenue: #5EC4BC; }
.cat-appalti,
.cat-documenti    { --cat: #2A332E; --cat-scuro: #1B2620; --cat-chiaro: #ECEFED; --cat-tenue: #B9C4BD; }
.cat-ambra        { --cat: #A85A00; --cat-scuro: #8A4B00; --cat-chiaro: #FFF4E5; --cat-tenue: #F2B872; }
.cat-news         { --cat: #B96B00; --cat-scuro: #8A4B00; --cat-chiaro: #FFF4E5; --cat-tenue: #F2B872; }

body {
  background: linear-gradient(180deg, #E2E9E4 0%, #B9C4BD 72%, #9DAAA2 100%);
  background-color: #B9C4BD;
  min-height: 100vh;
}
a { color: var(--cat-scuro, var(--verde)); }

/* il fuoco da tastiera si vede su fondo chiaro e su fondo scuro */
:focus-visible { outline: 3px solid #17803F; outline-offset: 2px; }
.sidebar :focus-visible, .topbar :focus-visible, .barra-sezione :focus-visible,
.tessera-piena:focus-visible { outline-color: var(--lime); }

/* ---------- 2. il menu a sinistra (scuro) ---------- */
.sidebar {
  flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
  padding: 14px 12px 20px; gap: 2px;
  background: linear-gradient(180deg, var(--scuro-1) 0%, var(--scuro-2) 60%, var(--scuro-3) 100%);
  border-right: 0; color: #fff;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.sb-brand, .sb-brand.con-logo {
  display: flex; justify-content: center; align-items: center;
  min-height: 0; margin: 0 0 12px; padding: 10px 14px;
  border-radius: 14px; background: #fff;
}
.sb-brand img.sb-logo { display: block; width: 100%; max-width: 190px; height: auto; }
.sidebar .tabs { padding: 0; gap: 2px; }
.sidebar .tabs > a, .sidebar .tabs details.tab-menu > summary {
  min-height: 44px; padding: 0 14px; gap: 12px; border-radius: 999px;
  color: rgba(255, 255, 255, .82); font-size: 13.5px; font-weight: 500;
  background: transparent; box-shadow: none;
}
.sidebar .tabs > a:hover, .sidebar .tabs details.tab-menu > summary:hover {
  background: rgba(255, 255, 255, .08); color: #fff;
}
/* il gruppo aperto: fondo bianco al 10% */
.sidebar .tabs details.tab-menu[open] > summary,
.sidebar .tabs details.tab-menu.attiva > summary,
.sidebar .tabs details.tab-menu.attiva[open] > summary {
  background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; box-shadow: none;
}
/* la voce attiva: pillola bianca, testo nel colore scuro della sezione */
.sidebar .tabs > a.attiva, .sidebar .tab-tendina a.attiva {
  background: #fff; color: var(--cat-scuro, #0B6B32); font-weight: 600;
  box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .8);
}
.sidebar .tab-icona svg { width: 18px; height: 18px; }
/* Lavori, Preventivi e Magazzino: icona tinta col colore della sezione */
.sidebar .tabs > a.cat-preventivi:not(.attiva) .tab-icona,
.sidebar .tabs > a.cat-magazzino:not(.attiva) .tab-icona,
.sidebar .tabs details.cat-lavori > summary .tab-icona { color: var(--cat-tenue); }
.sidebar .tab-freccia { opacity: .8; }
/* i contatori: lime su fondo scuro, nel colore della sezione sulla voce attiva */
.sidebar .pallino, .sidebar .tabs > a.attiva .pallino,
.sidebar .tabs details.tab-menu.attiva > summary .pallino {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lime); color: var(--testo); font-size: 11px; font-weight: 700; line-height: 1;
}
.sidebar .tabs > a.attiva .pallino, .sidebar .tab-tendina a.attiva .pallino {
  background: var(--cat, #17803F); color: #fff;
}
.sidebar .tabs summary .pallino { margin-left: auto; }
.sidebar .tabs summary .pallino + .tab-freccia { margin-left: 0; }
/* le sottovoci: pallino da 8 px nel colore della loro sezione, niente icona */
.sidebar .tab-tendina {
  margin: 2px 0 6px 22px; padding-left: 10px; gap: 2px;
  border-left: 1px solid rgba(255, 255, 255, .22);
}
.sidebar .tab-tendina a {
  min-height: 38px; padding: 0 12px; gap: 9px; border-radius: 999px;
  color: rgba(255, 255, 255, .82); font-size: 13px; font-weight: 500;
}
.sidebar .tab-tendina a::before { display: none; }
.sidebar .tab-tendina a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar .tab-tendina .tab-icona { display: none; }
.tab-punto { display: none; }
.sidebar .tab-tendina .tab-punto {
  display: block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 999px;
  background: var(--cat-tenue, #B9C4BD);
}
.sidebar .tab-tendina a.attiva .tab-punto { background: var(--cat, #17803F); }
.sidebar .tab-tendina .tab-testo { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.sb-velo { background: rgba(10, 16, 12, .55); }

/* ---------- 3. la testata (scura) ---------- */
.topbar {
  min-height: var(--topbar-h); padding: 12px 24px; gap: 10px 20px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--scuro-1) 0%, var(--scuro-2) 100%);
  color: #fff; border-bottom: 0;
  box-shadow: 0 6px 14px -3px rgba(20, 28, 23, .55);
}
.tb-saluto h1, .tb-titolo { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.tb-saluto small { color: rgba(255, 255, 255, .78); font-size: 12px; }
.tb-destra { flex-wrap: wrap; gap: 10px 16px; margin-left: auto; }
.tb-meteo, .tb-meteo:hover {
  min-height: 40px; padding: 0 14px; gap: 8px; border: 0; border-radius: 999px;
  background: #fff; color: var(--testo); font-size: 12.5px;
}
.tb-meteo:hover { background: #F1F6F2; }
.tb-meteo b { color: var(--testo); font-weight: 600; }
.tb-meteo span.tm-testo { color: var(--testo); }
.tb-meteo .tm-icona .ico, .tb-meteo .tm-icona svg { color: #17803F; width: 18px; height: 18px; }
/* gli interruttori: pista bianca al 30%, pallina bianca, testo su due righe */
.topbar .master-switch { margin: 0; }
.topbar .ms-tasto, .topbar .switch-veloci {
  width: auto; padding: 0; gap: 8px; background: transparent; border: 0;
  color: #fff; font: inherit; cursor: pointer; display: flex; align-items: center;
}
.topbar .ms-tasto:hover, .topbar .switch-veloci:hover { background: transparent; }
.topbar .ms-pista { width: 40px; height: 24px; background: rgba(255, 255, 255, .3); }
.topbar .ms-pallina { top: 3px; left: 3px; width: 18px; height: 18px; box-shadow: none; }
.topbar .master-switch.on .ms-pista, .topbar .switch-veloci.on .ms-pista { background: var(--lime); }
.topbar .master-switch.on .ms-pista { background: #F2B872; }
.topbar .master-switch.on .ms-pallina, .topbar .switch-veloci.on .ms-pallina { left: 19px; }
.topbar .ms-testo { color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: left; }
.topbar .ms-testo small { color: rgba(255, 255, 255, .78); font-size: 11px; }
/* chi e' entrato: avatar lime, nome e ruolo */
.tb-utente { display: flex; align-items: center; gap: 10px; }
.tb-utente .avatar {
  width: 36px; height: 36px; font-size: 14px;
  background: var(--lime); color: var(--testo); box-shadow: none;
}
.tb-utente .ub-chi { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.25; text-align: left; }
.tb-utente .ub-chi small { color: rgba(255, 255, 255, .78); font-size: 11.5px; }
.topbar .tb-esci {
  width: 44px; height: 44px; border-radius: 999px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .34); color: #fff;
}
.topbar .tb-esci:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .6); }
.tb-menu {
  background: transparent; border: 1px solid rgba(255, 255, 255, .34); color: #fff;
  border-radius: 999px; width: 44px; height: 44px;
}
/* senza menu (operaio): logo su riquadro bianco; la O con la formica solo sul telefono */
.topbar .brand.con-logo { background: #fff; border-radius: 14px; padding: 6px 12px; }
.topbar .brand .tb-logo { height: 44px; width: auto; }
.tb-icona-app { display: none; }

/* ---------- 4. la pagina ---------- */
.contenuto { max-width: 1440px; padding: 22px 24px 28px; }
.card {
  border: 0; border-radius: 20px; padding: 18px 20px 20px;
  box-shadow: var(--ombra-sup);
}
h1 { color: var(--cat-scuro, var(--verde-scuro)); font-size: 24px; font-weight: 700; }
h2, h3 { color: var(--cat-scuro, var(--verde-scuro)); }
.occhiello {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--testo-2);
  text-transform: uppercase;
}
.testata-pagina { align-items: flex-end; gap: 12px 24px; }
.testata-pagina h1 { color: var(--cat-scuro, var(--verde-scuro)); }
/* l'intestazione delle pagine a elenco poggia sullo sfondo, non in una card */
.testata-sfondo { margin: 0 0 16px; }
.testata-sfondo .muted, .testata-sfondo .ds { max-width: 760px; font-size: 13px; line-height: 1.55; color: #26302A; margin: 4px 0 0; }
.testata-sfondo h1 .ico:first-child { display: none; }

/* ---------- 5. la barra dei filtri, appesa sotto la testata ---------- */
.contenuto .barra-sezione,
.contenuto form.filtri.barra-sezione,
.contenuto[class*="cat-"] form.filtri.barra-sezione[method="get"] {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: -22px 0 18px; padding: 10px 14px;
  border: 0; border-radius: 0 0 16px 16px;
  background: var(--cat); color: #fff;
  box-shadow: 0 10px 20px -14px rgba(20, 28, 23, .9);
}
/* se sopra c'e' un avviso la barra non puo' piu' appendersi: diventa un nastro */
.contenuto > .flash ~ .barra-sezione,
.contenuto > .errore ~ .barra-sezione,
body.senza-menu .contenuto .barra-sezione,
.contenuto > .flash ~ form.filtri.barra-sezione[method="get"][class],
.contenuto > .errore ~ form.filtri.barra-sezione[method="get"][class] { margin-top: 0; border-radius: 16px; }
.barra-sezione > div { min-width: 0; flex: 0 1 auto; }
.barra-sezione label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.barra-sezione .bs-pillole { display: flex; flex-wrap: wrap; gap: 8px; }
.barra-sezione .bs-tendine { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.barra-sezione .pf {
  min-height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 999px;
  background: transparent; color: #fff; font: inherit; font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.barra-sezione .pf:hover { background: rgba(255, 255, 255, .14); }
.barra-sezione .pf.pf-on { background: #fff; border-color: #fff; color: var(--cat-scuro); font-weight: 600; }
.contenuto form.barra-sezione select, .contenuto form.barra-sezione input:not([type=hidden]) {
  width: auto; min-width: 150px; min-height: 40px; padding: 0 34px 0 14px;
  border: 0; border-radius: 999px; background-color: #fff; color: var(--testo); font-size: 12.5px;
}
.contenuto form.barra-sezione input:not([type=hidden]) { padding-right: 14px; }
.contenuto form.barra-sezione .btn, .contenuto[class*="cat-"] form.barra-sezione .btn {
  min-height: 40px; padding: 0 16px; background: #fff; color: var(--cat-scuro); border: 0; box-shadow: none;
}

/* ---------- 6. i pulsanti: a capsula ---------- */
.btn {
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  background: #17803F; border-color: #17803F;
  box-shadow: 0 10px 22px -14px rgba(20, 28, 23, .9);
}
.btn-small { min-height: 36px; padding: 0 14px; font-size: 12.5px; border-radius: 999px; box-shadow: none; }
.btn-cat { background: var(--cat); border-color: var(--cat); }
.btn-grey, .btn-ghost {
  background: #fff; color: var(--testo); border: 1.5px solid var(--ink-2); box-shadow: none;
}
.btn-grey:hover, .btn-ghost:hover { background: #F1F4F2; border-color: var(--ink-2); }
.btn-cat-bordo, .btn-verde-bordo {
  background: #fff; color: var(--cat-scuro); border: 1.5px solid var(--cat); box-shadow: none;
}
/* i pulsanti che portano a un'altra sezione ne prendono il colore */
.btn-viola, .contenuto[class*="cat-"] .btn-viola { background: #944A92; border-color: #944A92; color: #fff; }
.btn-blu-fisso, .contenuto[class*="cat-"] .btn-blu-fisso { background: #3F48CC; border-color: #3F48CC; color: #fff; }
.btn-rosso, .contenuto[class*="cat-"] .btn-rosso { background: #C63A32; border-color: #C63A32; color: #fff; }
.btn-marrone, .contenuto[class*="cat-"] .btn-marrone { background: #8B5A3C; border-color: #8B5A3C; color: #fff; }
.btn-nero, .contenuto[class*="cat-"] .btn-nero { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.btn-ciano, .contenuto[class*="cat-"] .btn-ciano { background: #0F7C78; border-color: #0F7C78; color: #fff; }
.btn-verde-fisso, .contenuto[class*="cat-"] .btn-verde-fisso { background: #17803F; border-color: #17803F; color: #fff; }
.btn-arancio { background: #A85A00; border-color: #A85A00; }
/* il tondo per aprire una riga */
.btn-tondo {
  width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 999px;
  background: #fff; color: var(--testo-tenue); border: 1px solid var(--bordo-forte); box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 15px;
}
.btn-tondo:hover { border-color: var(--cat); color: var(--cat-scuro); }
.tasto-menu > summary.btn { list-style: none; }

/* ---------- 7. i campi ---------- */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=search],
input[type=time], input:not([type]), select, textarea {
  border: 1.5px solid var(--bordo-forte); border-radius: 12px; background-color: var(--fondo-campo);
  font-size: 13.5px; min-height: 44px;
}
textarea { min-height: 96px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--cat, #17803F); background-color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat, #17803F) 18%, transparent);
}

/* ---------- 8. le pillole di stato ---------- */
.badge { padding: 2px 10px; font-size: 11.5px; font-weight: 600; gap: 5px; }
.badge-piena { background: var(--c, var(--cat)) !important; color: #fff !important; }

/* ---------- 9. le tabelle: intestazione antracite ---------- */
table.elenco { font-size: 13.5px; }
table.elenco th {
  padding: 13px 14px; background: var(--ink-2); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; border-bottom: 0;
}
table.elenco td { padding: 10px 14px; vertical-align: middle; border-bottom: 1px solid var(--bordo); }
table.elenco th:first-child, table.elenco td:first-child { padding-left: 18px; }
table.elenco tr:hover td { background: #F7F9F8; }
table.elenco th:first-child { border-top-left-radius: 12px; }
table.elenco th:last-child { border-top-right-radius: 12px; }
.tabella-scroll { border-radius: 12px; }
/* la tabella che e' tutta la card: niente margini, angoli a 16 px */
.card.card-tabella { padding: 0; border-radius: 16px; overflow: hidden; }
.card-tabella .tabella-scroll { border-radius: 0; overflow-x: auto; }
.card-tabella table.elenco th { border-radius: 0; }
.card-tabella table.elenco tr:last-child td { border-bottom: 0; }
.card-tabella > .muted, .card-tabella > p { padding: 18px 20px; margin: 0; }
td .riga-sotto, td small.muted { font-size: 12px; color: var(--testo-tenue); }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.riga-ambra td { background: #FFF4E5; }
.barra-avanz { display: block; margin-top: 6px; width: 112px; height: 5px; border-radius: 999px; background: var(--bordo); }
.barra-avanz i { display: block; height: 5px; border-radius: 999px; background: var(--cat); }

/* ---------- 10. le tessere: piene o bianche, nel colore della sezione ---------- */
.tessere { gap: 14px; }
.tessera {
  --t: var(--cat, var(--tono)); --t-scuro: var(--cat-scuro, var(--tono));
  grid-template-areas: "etichetta icona" "numero numero" "nota nota";
  min-height: 98px; padding: 14px 16px; gap: 2px 8px;
  border: 0; border-radius: 20px; background: #fff; box-shadow: var(--ombra-sup);
}
.tessera::before, .tessera::after, .tessera.cat-documenti::after, .tessera-nero::after { display: none; }
.tessera .tz-etichetta, .tessera.cat-segnalazioni .tz-etichetta, .tessera.cat-lavori .tz-etichetta,
.tessera.cat-sopralluoghi .tz-etichetta, .tessera.cat-commesse .tz-etichetta, .tessera.cat-preventivi .tz-etichetta,
.tessera.cat-magazzino .tz-etichetta, .tessera.cat-documenti .tz-etichetta, .tessera.cat-news .tz-etichetta {
  color: var(--t-scuro); font-size: 13.5px; font-weight: 600; line-height: 1.3;
}
.tessera .tz-icona {
  width: 28px; height: 28px; border-radius: 8px; background: var(--t); color: #fff; font-size: 15px;
}
.tessera .tz-icona .ico, .tessera.cat-magazzino .tz-icona .ico, .tessera.cat-documenti .tz-icona .ico { width: 16px; height: 16px; color: #fff; }
.tessera .tz-numero { color: var(--t-scuro); font-size: 26px; font-weight: 700; line-height: 1.15; }
.tessera .tz-nota { color: var(--testo-tenue); font-size: 12px; }
.tessera-vuota .tz-numero { color: var(--t-scuro); opacity: .5; }
.tessera.tessera-piena { background: var(--t); color: #fff; }
.tessera.tessera-piena .tz-etichetta, .tessera.tessera-piena .tz-numero, .tessera.tessera-piena .tz-nota { color: #fff; }
.tessera.tessera-piena .tz-icona { background: rgba(255, 255, 255, .2); }
a.tessera:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 28, 23, .1), 0 14px 26px -12px rgba(20, 28, 23, .5); }
/* le tessere dentro una pagina di sezione prendono il colore della pagina */
.contenuto[class*="cat-"] .scheda-testa .tessera { --t: var(--cat); --t-scuro: var(--cat-scuro); }

/* ---------- 11. il piede: logo largo senza riquadro ---------- */
.fondo.fondo-logo {
  margin: 4px 24px 24px; padding: 8px 24px; gap: 6px;
  background: transparent; border: 0; box-shadow: none;
}
.fondo-marchio { display: block; width: 100%; max-width: 400px; height: auto; }
.fondo-logo .fondo-riga { font-size: 11.5px; color: #26302A; }
.fondo-logo .fondo-riga a { color: inherit; text-decoration: none; }
.fondo-logo .fondo-riga a:hover { text-decoration: underline; }

/* ---------- 12. finestre ---------- */
.modale .banco-corpo, .modale-corpo { border-radius: 20px; }

/* ---------- 13. schermi piccoli ---------- */
@media (max-width: 1000px) {
  .sidebar { width: 280px; flex-basis: 280px; }
  .topbar { padding: 10px 16px; }
  .contenuto { padding: 20px 16px 24px; }
  .contenuto .barra-sezione,
  .contenuto[class*="cat-"] form.filtri.barra-sezione[method="get"] { margin-top: -20px; }
  .tb-utente .ub-chi { display: none; }
}
@media (max-width: 700px) {
  .topbar { min-height: 64px; gap: 10px; flex-wrap: nowrap; }
  .tb-saluto h1 { font-size: 15px; }
  .tb-destra { flex-wrap: nowrap; gap: 8px; }
  .topbar .ms-testo, .topbar .tb-utente { display: none; }
  .topbar .tb-meteo { padding: 0 12px; }
  .contenuto { padding: 16px 12px 24px; }
  .contenuto .barra-sezione,
  .contenuto[class*="cat-"] form.filtri.barra-sezione[method="get"] { margin-top: -16px; padding: 10px; }
  .barra-sezione .bs-pillole { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .barra-sezione .bs-tendine { margin-left: 0; width: 100%; }
  .barra-sezione .bs-tendine > * { flex: 1 1 140px; }
  .contenuto form.barra-sezione select { width: 100%; min-width: 0; }
  .fondo.fondo-logo { margin: 4px 12px 16px; }
  .fondo-marchio { max-width: 280px; }
  /* la barra in basso: bianca, voce attiva a pillola verde chiaro */
  .barra-basso { background: #fff; }
  .bb-voce.attiva, .bb-altro.attiva > summary, .bb-altro[open] > summary { color: #0B6B32; }
  .bb-voce.attiva .bb-icona, .bb-altro.attiva > summary .bb-icona, .bb-altro[open] > summary .bb-icona {
    background: #E3F4EA; color: #0B6B32;
  }
  .bb-pallino { background: var(--lime); color: var(--testo); }
  /* l'operaio: testata arrotondata con la sola O con la formica */
  body.senza-menu .topbar { border-radius: 0 0 22px 22px; }
  body.senza-menu .topbar .brand.con-logo { padding: 4px; border-radius: 14px; }
  body.senza-menu .topbar .tb-logo-largo { display: none; }
  body.senza-menu .tb-icona-app { display: block; width: 48px; height: 48px; object-fit: contain; }
  body.senza-menu .topbar .brand { display: flex; }
  body.senza-menu .tb-saluto small { display: block; }
}
@media print {
  body { background: #fff; }
  .fondo { display: none !important; }
}

/* ---------- 14. celle degli elenchi ---------- */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
.cella-titolo { min-width: 200px; }
.cella-titolo > a, .cella-titolo > strong:first-child {
  display: block; color: var(--testo); font-weight: 600; text-decoration: none; line-height: 1.35;
}
.cella-titolo > a:hover { color: var(--cat-scuro); text-decoration: underline; }
.cella-titolo small { display: block; margin-top: 2px; }
.cella-titolo .badge { margin-top: 4px; }
td.col-azioni { white-space: nowrap; text-align: right; }
td.col-azioni > * + * { margin-left: 6px; }
/* il modulo "nuovo ..." che scende sotto l'intestazione sullo sfondo */
.pannello-sfondo {
  margin: 0 0 16px; padding: 18px 20px 20px;
  background: #fff; border-radius: 20px; box-shadow: var(--ombra-sup);
}

/* ---------- 15. Sopralluoghi: schede a sinistra, calendario a destra ---------- */
.sop-impianto { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.sop-impianto > .sop-colonna > .card, .sop-impianto > .card { margin-bottom: 0; }
.sop-impianto .sop-lista { gap: 12px; }
.sop-riga, .contenuto[class*="cat-"] .sop-riga:hover {
  border: 0; border-radius: 20px; box-shadow: var(--ombra-sup);
}
.contenuto[class*="cat-"] .sop-riga:hover { box-shadow: 0 0 0 2px var(--cat-chiaro), var(--ombra-sup); }
.sop-riga .sop-item { padding: 14px 16px 16px; padding-right: 68px; gap: 4px; }
.sop-riga .sop-item:hover { background: transparent; }
.sop-code { font-size: 12px; font-weight: 500; }
.sop-titolo { font-size: 15px; }
.sop-meta { font-size: 12.5px; color: var(--testo-2); gap: 2px 14px; }
.sop-meta strong { color: var(--testo); }
.sop-mappa-tasto { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--bordo-forte); background: #fff; color: var(--cat-scuro); }
/* le cinque fasi del sopralluogo, a segmenti */
.fasi { display: flex; gap: 4px; width: 100%; max-width: 260px; margin-top: 6px; }
.fasi i { flex: 1 1 0; height: 5px; border-radius: 999px; background: var(--bordo); }
.fasi i.fatta { background: var(--cat); }
/* il calendario del mese */
.sop-cal .testata-pagina { margin-bottom: 6px; }
.sop-cal .titolo-sezione { border: 0; padding: 0; color: var(--cat-scuro); font-size: 17px; }
.sop-cal .titolo-sezione > span:first-child { display: none; }
.sop-cal .calendario-mese { border-spacing: 4px; margin-top: 0; }
.sop-cal .calendario-mese th { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--testo-tenue); background: transparent; text-align: center; }
.sop-cal .calendario-mese td {
  height: 56px; padding: 5px 6px; border: 1px solid var(--bordo); border-radius: 10px;
  background: #fff; font-size: 12px;
}
.sop-cal .calendario-mese td.vuota { border-color: var(--bordo); }
.sop-cal .calendario-mese td:empty { border-color: transparent; }
.sop-cal .calendario-mese td.oggi { outline: 0; border-color: var(--cat); box-shadow: inset 0 0 0 1px var(--cat); }
.sop-cal .calendario-mese td.oggi .cm-giorno { color: var(--cat-scuro); font-weight: 700; }
.sop-cal .cm-giorno { font-weight: 500; color: var(--testo); }
.sop-cal .calendario-mese td .cm-voce.sopralluogo {
  display: inline-block; max-width: 100%; padding: 1px 6px; border-radius: 6px;
  background: var(--cat); color: #fff; font-size: 10.5px; font-weight: 600;
}
.sop-cal .segmenti .sg-voce { border-radius: 999px; }
@media (max-width: 1100px) { .sop-impianto { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 16. Magazzino ---------- */
.barra-sezione .bs-cerca { flex: 1 1 240px; max-width: 320px; }
.contenuto form.barra-sezione .bs-cerca input { width: 100%; }
.barra-sezione .bs-destra { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.testata-sfondo .testata-link { margin: 0; font-size: 13px; font-weight: 600; }
.testata-sfondo .testata-link a { color: var(--cat-scuro); }
.tessere-mini { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tessere-mini .tessera { min-height: 88px; }
.tessere-mini a.tessera.tz-scelta { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--t), var(--ombra-sup); }
.tessere-mini a.tessera.tz-scelta::after { display: none; }
/* le categorie del materiale: pillole bianche, quella scelta piena */
.tab-categorie { gap: 8px; margin: 0 0 14px; }
.tab-cat {
  min-height: 38px; padding: 0 6px 0 14px; border: 1px solid var(--bordo-forte); border-radius: 999px;
  background: #fff; color: var(--testo); font-size: 12.5px; font-weight: 500; gap: 8px;
}
.tab-cat:hover { border-color: var(--cat); }
.tab-cat.attivo { background: var(--cat); border-color: var(--cat); color: #fff; font-weight: 600; }
.tab-cat .tab-n { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: var(--cat-chiaro); color: var(--cat-scuro); font-size: 11px; font-weight: 700; }
.tab-cat.attivo .tab-n { background: rgba(255, 255, 255, .25); color: #fff; }
/* le righe: in riparazione ambra, in cantiere rosato */
table.elenco tr.riga-riparazione td { background: #FFF4E5; border-top: 0; }
table.elenco tr.riga-riparazione strong { color: #8A4B00; }
table.elenco tr.riga-cantiere td { background: transparent; border-top: 0; }
table.elenco tr.riga-cantiere strong { color: var(--testo); }
td small.sotto { display: block; font-size: 12px; color: var(--testo-tenue); font-weight: 400; }

/* ---------- 17. La pagina di accesso ---------- */
body:has(.login-v5) { background: linear-gradient(180deg, #E2E9E4 0%, #B9C4BD 72%, #9DAAA2 100%); }
.login-v5.login-pannello {
  grid-template-columns: minmax(0, 540px) minmax(0, 580px); gap: 0; padding: 0; align-items: stretch;
  max-width: 1120px; background: transparent; border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(20, 28, 23, .55);
}
.login-v5 .login-card { border-radius: 0; padding: 48px 56px 30px; box-shadow: none; display: flex; flex-direction: column; }
.login-v5 .lc-logo { max-width: 280px; margin: 0 0 22px; }
.login-v5 .lc-titolo { margin: 0 0 22px; }
.login-v5 .lc-titolo h1 { font-size: 30px; font-weight: 700; color: var(--testo); }
.login-v5 .lc-titolo p { margin: 6px 0 0; font-size: 14px; color: var(--testo-tenue); }
.login-v5 .lc-form label { margin: 16px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--testo-2); }
.login-v5 .lc-form input[type=email], .login-v5 .lc-form input[type=password], .login-v5 .lc-form input[type=text] {
  min-height: 48px; padding: 0 16px; border: 1.5px solid var(--bordo-forte); border-radius: 12px;
  background: var(--fondo-campo); font-size: 15px;
}
.login-v5 .lc-form input:focus { border-color: #17803F; background: #fff; box-shadow: 0 0 0 3px rgba(23, 128, 63, .18); }
.login-v5 .lc-form .campo-password > input { padding-right: 46px; }
.login-v5 .lc-form .occhio { right: 12px; }
.login-v5 .lc-entra {
  width: 100%; min-height: 50px; margin-top: 24px; border-radius: 999px;
  background: #17803F; border-color: #17803F; font-size: 15px;
  box-shadow: 0 14px 24px -14px rgba(23, 128, 63, .9);
}
.login-v5 .lc-aiuto { display: block; margin: 18px auto 0; color: #0B6B32; font-size: 14px; font-weight: 500; text-decoration: underline; text-align: center; }
/* in fondo alla scheda d'accesso lo stesso marchio del piede delle pagine:
   ha preso il posto della vecchia riga con versione e sviluppatore */
.login-v5 .lc-marchio {
  display: block; width: 100%; max-width: 300px; height: auto;
  margin: 32px auto 0;
}
.login-v5 .login-lato {
  padding: 40px; color: #fff; gap: 22px;
  background: linear-gradient(180deg, var(--scuro-1) 0%, var(--scuro-2) 60%, var(--scuro-3) 100%);
}
.login-v5 .login-foto { border-radius: 20px; width: 100%; height: auto; }
.login-ruoli { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.login-ruoli li { display: flex; gap: 14px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.login-ruoli strong { display: block; color: #fff; font-size: 14.5px; font-weight: 700; }
.lr-icona {
  flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: #fff;
}
.login-ruoli li:first-child .lr-icona { background: #17803F; }
.lr-icona .ico, .lr-icona svg { width: 20px; height: 20px; }
.login-v5 .login-firma { margin: auto 0 0; text-align: left; font-size: 12.5px; opacity: .8; }
@media (max-width: 900px) {
  .login-v5.login-pannello { grid-template-columns: 1fr; max-width: 560px; padding: 0; }
  .login-v5 .login-card { padding: 30px 24px 22px; }
  .login-v5 .login-lato { padding: 24px; }
  .login-v5 .login-foto { max-height: 220px; object-fit: cover; }
}
@media (max-width: 640px) {
  .login-v5 .login-foto { display: none; }
  .login-v5.login-pannello { border-radius: 22px; }
  .login-v5 .lc-logo { max-width: 220px; }
}

/* ---------- 18. elenchi: righe divise e fondo alternato ---------- */
table.elenco > tbody > tr:nth-child(even) > td,
table.elenco > tr:nth-child(even) > td { background: #F3F7F4; }
table.elenco > tbody > tr > td, table.elenco > tr > td { border-bottom: 1px solid #DCE4DE; }
table.elenco > tbody > tr:hover > td, table.elenco > tr:hover > td { background: #E8F1EB; }
table.elenco tr.riga-riparazione > td { background: #FFF4E5; }
table.elenco tr.riga-scelta > td { background: #fff; }
/* anche gli elenchi a schede e le liste della home: un filetto fra una voce e l'altra */
.sop-lista .sop-riga:nth-child(even) .sop-item { background: #FAFCFA; }

/* ---------- 19. barra compatta (Segnalazioni): tutto su una riga ---------- */
.barra-compatta { gap: 6px; padding: 10px 12px; }
.barra-compatta .bs-pillole, .barra-compatta .bs-tendine { gap: 6px; }
.barra-compatta .pf { padding: 0 10px; font-size: 12px; min-height: 36px; }
.contenuto form.barra-compatta select {
  min-width: 0; width: 112px; min-height: 36px; padding: 0 26px 0 12px; font-size: 12px;
  background-position: right 8px center;
}
.contenuto form.barra-compatta .btn { min-height: 36px; padding: 0 14px; }
@media (min-width: 1300px) {
  .barra-compatta, .barra-compatta .bs-pillole, .barra-compatta .bs-tendine { flex-wrap: nowrap; }
  .barra-compatta .bs-tendine { margin-left: auto; }
  .barra-compatta .pf { white-space: nowrap; }
}

/* ---------- 20. Calendario, Documenti, Avvisi, Appalti ---------- */
.titolo-vista { margin: 0; font-size: 19px; color: var(--cat-scuro, var(--verde-scuro)); }
.contenuto form.barra-sezione .fd-cerca, .contenuto form.barra-sezione .fa-cerca { flex: 1 1 220px; max-width: 320px; }
.contenuto form.barra-sezione .fd-cerca input, .contenuto form.barra-sezione .bs-cerca input { width: 100%; }
.card.card-elenco { padding: 14px; }
.card-elenco .elenco-avvisi { margin: 0; gap: 0; }
.card-elenco .elenco-avvisi > li > a { border: 0; border-radius: 12px; box-shadow: none; }
.card-elenco .elenco-avvisi > li + li { border-top: 1px solid #DCE4DE; }
.card-elenco .elenco-avvisi > li:nth-child(even) > a { background: #F3F7F4; }
.card-elenco .elenco-avvisi > li > a:hover { background: #E8F1EB; box-shadow: none; }

/* ---------- 21. divisione delle righe piu' marcata (richiesta di Robi 03-10) ---------- */
table.elenco > tbody > tr:nth-child(even) > td { background: #E6EFE9; }
table.elenco > tbody > tr > td { border-bottom: 1px solid #BFCEC4; }
table.elenco > tbody > tr:hover > td { background: #D6E7DC; }
table.elenco tr.riga-riparazione > td { background: #FFEBCC; }
.card-elenco .elenco-avvisi > li + li { border-top: 1px solid #BFCEC4; }
.card-elenco .elenco-avvisi > li:nth-child(even) > a { background: #E6EFE9; }
.lista-home li { border-bottom: 1px solid #BFCEC4; }
.lista-home li:nth-child(even) { background: #E6EFE9; }
.lista-home li { padding-left: 10px; padding-right: 10px; border-radius: 0; }
.sop-lista .sop-riga:nth-child(even) .sop-item { background: #EEF4F0; }
.progetti .progetto:nth-child(even) { background: #EEF4F0; }

/* ---------- 22. Home, "La giornata": righe divise e fondo alternato ---------- */
.righe-giornata { gap: 0; border: 1px solid #BFCEC4; border-radius: 14px; overflow: hidden; }
.righe-giornata > .riga-giornata { border: 0; border-radius: 0; box-shadow: none; background: #fff; }
.righe-giornata > .riga-giornata + .riga-giornata { border-top: 1px solid #BFCEC4; }
.righe-giornata > .riga-giornata:nth-child(even) { background: #E6EFE9; }
.righe-giornata > .riga-giornata:hover { background: #D6E7DC; }

/* ---------- 23. Home: il mini calendario dei prossimi 10 giorni ---------- */
.tessere-testa { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.tessera-cal {
  grid-column: span 2; min-width: 0; min-height: 98px; padding: 12px 14px 10px;
  border-radius: 20px; background: #fff; box-shadow: var(--ombra-sup);
  display: flex; flex-direction: column; gap: 6px;
}
.tc-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tc-titolo { font-size: 13.5px; font-weight: 600; color: #2A3193; }
.tc-vai { font-size: 12px; font-weight: 600; color: #3F48CC; text-decoration: none; white-space: nowrap; }
.tc-vai:hover { text-decoration: underline; }
.tc-giorni { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.tc-giorno {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 4px 0 5px; border-radius: 10px; border: 1px solid var(--bordo);
  text-decoration: none; color: var(--testo); line-height: 1.15;
}
.tc-giorno:hover { border-color: #3F48CC; background: #ECEDFC; }
.tc-gs { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-tenue); }
.tc-n { font-size: 15px; font-weight: 700; }
.tc-festivo .tc-gs, .tc-festivo .tc-n { color: #C63A32; }
.tc-oggi { background: #3F48CC; border-color: #3F48CC; }
.tc-oggi .tc-gs, .tc-oggi .tc-n { color: #fff; }
.tc-oggi:hover { background: #2A3193; }
.tc-pallini { display: flex; gap: 2px; min-height: 6px; margin-top: 2px; }
.tc-p { display: inline-block; width: 6px; height: 6px; border-radius: 999px; }
.tc-lavori { background: #17803F; }
.tc-sopr { background: #3F48CC; }
.tc-app { background: #944A92; }
.tc-scad { background: #C63A32; }
.tc-oggi .tc-p { box-shadow: 0 0 0 1.5px #fff; }
.tc-legenda { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 10.5px; color: var(--testo-tenue); }
.tc-legenda span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 700px) {
  .tessere-testa .tessera-cal { flex: 0 0 320px; scroll-snap-align: start; }
  .tc-legenda { display: none; }
}

/* ---------- 24. pulsanti dell'intestazione centrati in altezza ---------- */
.testata-pagina.testata-sfondo { align-items: center; }
.testata-sfondo > .row-btn, .testata-sfondo > .testata-link { align-self: center; margin: 0; }

/* ---------- 25. Home: tessere piu' grandi, sei colonne fisse ---------- */
@media (min-width: 701px) {
  .tessere.tessere-testa { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .tessere-testa .tessera { min-height: 124px; padding: 16px 18px; }
  .tessere-testa .tessera .tz-etichetta { font-size: 14px; }
  .tessere-testa .tessera .tz-numero { font-size: 32px; }
  .tessere-testa .tessera .tz-icona { width: 32px; height: 32px; }
  .tessere-testa .tessera-cal { min-height: 124px; }
  .tessere-testa .tc-giorno { padding: 6px 0 7px; }
  .tessere-testa .tc-n { font-size: 17px; }
}
@media (min-width: 701px) and (max-width: 1250px) {
  .tessere.tessere-testa { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 26. Calendario, "Segna un appuntamento": campi divisi ---------- */
#segna-appuntamento form.filtri {
  gap: 0; align-items: stretch; margin: 10px 0 12px;
  border: 1px solid #BFCEC4; border-radius: 14px; overflow: hidden; background: #fff;
}
#segna-appuntamento form.filtri > div {
  flex: 1 1 150px; min-width: 150px; padding: 10px 12px;
  border-right: 1px solid #BFCEC4; border-bottom: 1px solid #BFCEC4; margin-bottom: -1px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
#segna-appuntamento form.filtri > div:nth-of-type(even) { background: #E6EFE9; }
#segna-appuntamento form.filtri > div:last-child { border-right: 0; flex: 0 0 auto; min-width: 0; justify-content: center; }
#segna-appuntamento form.filtri label { margin: 0 0 4px; }
#segna-appuntamento .elenco-eventi table.elenco { border: 1px solid #BFCEC4; border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }

/* ---------- 27. Avvisi: la barra verde tutta su una riga ---------- */
.barra-compatta .bs-cerca { flex: 0 1 200px; max-width: 200px; }
.contenuto form.barra-compatta .bs-cerca input { min-width: 0; min-height: 36px; font-size: 12px; }
@media (min-width: 1000px) {
  .filtri-avvisi.barra-compatta, .filtri-avvisi.barra-compatta .bs-pillole,
  .filtri-avvisi.barra-compatta .bs-tendine { flex-wrap: nowrap; }
  .filtri-avvisi.barra-compatta .bs-tendine { margin-left: auto; }
  .filtri-avvisi.barra-compatta .pf { white-space: nowrap; }
}

/* ---------- 28. lo switch Elenco/Box e la vista a box ---------- */
.bs-vista { margin-left: auto; flex: 0 0 auto; }
.switch-vista {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); width: max-content; flex: 0 0 auto;
}
.switch-vista .sv-voce {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border: 0; border-radius: 999px; background: transparent; color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.switch-vista .sv-voce svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.switch-vista .sv-voce[aria-pressed="true"] { background: #fff; color: var(--cat-scuro, #0B6B32); }
/* fuori dalla barra colorata (Home): su fondo chiaro */
.card .switch-vista { background: #E6EFE9; }
.card .switch-vista .sv-voce { color: var(--testo); }
.card .switch-vista .sv-voce[aria-pressed="true"] { background: #17803F; color: #fff; }
.barra-compatta .switch-vista .sv-voce { min-height: 30px; padding: 0 10px; }
@media (min-width: 1300px) { .barra-compatta .switch-vista .sv-voce span { display: none; } }

.griglia-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.box-voce {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px;
  background: #fff; border-radius: 20px; box-shadow: var(--ombra-sup);
  color: var(--testo); text-decoration: none; min-width: 0;
  transition: transform .11s ease, box-shadow .14s ease;
}
.box-voce:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--cat-chiaro), 0 14px 26px -12px rgba(20, 28, 23, .5); }
.bv-testa { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.bv-codice { font-size: 12px; color: var(--testo-tenue); font-weight: 500; }
.bv-titolo { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--cat-scuro); }
.bv-riga { display: flex; gap: 8px; font-size: 13px; line-height: 1.35; padding: 4px 0; border-top: 1px solid #DCE4DE; }
.bv-et { flex: 0 0 74px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-2); padding-top: 1px; }
.bv-link { color: var(--cat-scuro); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cat) 45%, transparent); text-underline-offset: 2px; cursor: pointer; }
.bv-link:hover, .bv-link:focus-visible { color: var(--cat); text-decoration-color: currentColor; }
.bv-piede { margin-top: auto; padding-top: 8px; border-top: 1px solid #DCE4DE; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 12.5px; }
.bv-piede .barra-avanz { margin-top: 0; }
.sop-meta .bv-link { font-size: inherit; }

/* Home, "La giornata" a box: le stesse righe diventano riquadri */
.righe-giornata.vista-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; border: 0; border-radius: 0; overflow: visible; }
.righe-giornata.vista-box > .riga-giornata,
.righe-giornata.vista-box > .riga-giornata:nth-child(even) {
  grid-template-columns: 1fr; background: #fff; border: 1px solid #BFCEC4; border-radius: 18px;
  box-shadow: var(--ombra-sup); align-content: start;
}
.righe-giornata.vista-box > .riga-giornata + .riga-giornata { border-top: 1px solid #BFCEC4; }
.righe-giornata.vista-box .rg-form { flex-wrap: wrap; }
.righe-giornata.vista-box .rg-form select { flex: 1 1 100%; }
.rg-cliente a { color: inherit; text-decoration: underline; text-decoration-color: #BFCEC4; text-underline-offset: 2px; }
.rg-cliente a:hover { color: var(--cat-scuro); }

/* ---------- 29. switch solo a icone, sempre sulla riga dei filtri ---------- */
.switch-vista { flex-wrap: nowrap; white-space: nowrap; }
.switch-vista .sv-voce, .barra-compatta .switch-vista .sv-voce {
  width: 38px; min-width: 38px; min-height: 34px; padding: 0; justify-content: center;
}
.switch-vista .sv-voce svg { width: 18px; height: 18px; }
.bs-vista { align-self: center; }
@media (min-width: 1000px) {
  .contenuto .barra-sezione:has(.bs-vista),
  .contenuto[class*="cat-"] form.filtri.barra-sezione:has(.bs-vista)[method="get"] { flex-wrap: nowrap; }
  .barra-sezione:has(.bs-vista) .bs-pillole { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
  .barra-sezione:has(.bs-vista) .bs-tendine { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
  .barra-sezione:has(.bs-vista) .bs-tendine select { min-width: 110px; width: auto; max-width: 190px; }
  .barra-sezione:has(.bs-vista) .bs-vista { margin-left: auto; order: 99; }
}
/* lo switch sta sempre in fondo a destra, anche quando la barra va a capo */
.barra-sezione .bs-vista { margin-left: auto; order: 99; }
.card-giornata .row-btn .switch-vista { order: 99; }

/* ---------- 30. switch davvero in fondo a destra ----------
   form.filtri > div ha flex: 1 1 150px (regola vecchia dei filtri): il
   contenitore dello switch si allargava e lo switch restava a sinistra
   dello spazio vuoto. Il contenitore e' largo quanto lo switch, e basta. */
.contenuto form.filtri > .bs-vista, .contenuto .barra-sezione > .bs-vista {
  flex: 0 0 auto !important; min-width: 0 !important; width: max-content; margin-left: auto !important;
  display: flex; justify-content: flex-end;
}
.card-giornata .testata-pagina .row-btn { margin-left: auto; justify-content: flex-end; }

/* =========================================================================
   v5.1 — Home rifatta dalle anteprime approvate da Robi il 03-10-2026 sera:
   tessere bianche con l'angolo sfumato, testata gialla, Timeline dei
   Dipendenti e Assegnazione Lavori (spunte su una linea + scheda a destra)
   ========================================================================= */
/* 1. tessere bianche, colore solo nell'angolo in basso a destra che sfuma nel bianco;
      testo e icona nel colore della tessera */
.tessere-testa .tessera, .tessere-testa .tessera.tessera-piena {
  background:
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--t) 34%, #fff) 0%, color-mix(in srgb, var(--t) 12%, #fff) 38%, #fff 70%);
  color: var(--t-scuro);
}
.tessere-testa .tessera .tz-etichetta, .tessere-testa .tessera.tessera-piena .tz-etichetta { color: var(--t-scuro); }
.tessere-testa .tessera .tz-numero, .tessere-testa .tessera.tessera-piena .tz-numero { color: var(--t); }
.tessere-testa .tessera .tz-nota, .tessere-testa .tessera.tessera-piena .tz-nota { color: var(--t-scuro); opacity: .8; }
.tessere-testa .tessera .tz-icona, .tessere-testa .tessera.tessera-piena .tz-icona {
  background: transparent; width: 32px; height: 32px;
}
.tessere-testa .tessera .tz-icona .ico { color: var(--t); width: 24px; height: 24px; }
.tessere-testa .tessera-vuota .tz-numero { opacity: .45; }

/* 2. testata: in alto una riga del verde scuro attuale, alta quanto lo spazio fra
      il riquadro bianco del logo e il bordo; sotto una fascia verde chiaro alta
      quanto il riquadro del logo, con le scritte scure */
:root { --riga-alta: 14px; --fascia-chiara: #F8F1D8; --altezza-logo: 74px; }
.topbar {
  padding: var(--riga-alta) 24px 0; min-height: calc(var(--riga-alta) + var(--altezza-logo));
  background: linear-gradient(var(--scuro-1), var(--scuro-1)) top / 100% var(--riga-alta) no-repeat, var(--fascia-chiara);
  color: var(--testo); box-shadow: 0 6px 14px -8px rgba(20, 28, 23, .45);
}
.tb-saluto h1 { color: var(--scuro-1); font-size: 17px; }
.tb-saluto small { color: #36423B; }
.tb-meteo { box-shadow: 0 1px 3px rgba(20, 28, 23, .12); }
.topbar .ms-testo { color: var(--scuro-1); }
.topbar .ms-testo small { color: #36423B; }
.topbar .ms-pista { background: rgba(14, 58, 36, .22); }
.tb-utente .ub-chi { color: var(--scuro-1); }
.tb-utente .ub-chi small { color: #36423B; }
.tb-utente .avatar { background: var(--scuro-2); color: #fff; }
.topbar .tb-esci { border-color: rgba(14, 58, 36, .4); color: var(--scuro-1); }
.topbar .tb-esci:hover { background: rgba(14, 58, 36, .08); color: var(--scuro-1); }
/* il riquadro del logo misura proprio --altezza-logo */
.sb-brand, .sb-brand.con-logo { height: var(--altezza-logo); padding: 6px 10px; }
.sb-brand img.sb-logo { max-height: calc(var(--altezza-logo) - 12px); width: auto; max-width: 100%; }

/* scritte della fascia gialla in nero (il bollo dell'avatar resta verde) */
.topbar .tb-saluto h1, .topbar .tb-saluto small,
.topbar .ms-testo, .topbar .ms-testo small,
.topbar .tb-utente .ub-chi, .topbar .tb-utente .ub-chi small,
.topbar .tb-meteo, .topbar .tb-meteo b, .topbar .tb-meteo .tm-testo { color: #000; }
.topbar .tb-esci { color: #000; border-color: rgba(0, 0, 0, .45); }
.topbar .ms-pista { background: rgba(0, 0, 0, .2); }

/* tessere: ombra piu' raccolta e bordino nel colore del testo della tessera */
.tessere-testa .tessera, .tessere-testa .tessera.tessera-piena {
  border: 1px solid color-mix(in srgb, var(--t-scuro) 35%, transparent);
  box-shadow: 0 1px 2px rgba(20, 28, 23, .10), 0 3px 6px -3px rgba(20, 28, 23, .28);
}
.tessere-testa a.tessera:hover { box-shadow: 0 1px 2px rgba(20, 28, 23, .12), 0 6px 10px -4px rgba(20, 28, 23, .35); }
.tessere-testa .tessera-cal {
  border: 1px solid color-mix(in srgb, #2A3193 35%, transparent);
  box-shadow: 0 1px 2px rgba(20, 28, 23, .10), 0 3px 6px -3px rgba(20, 28, 23, .28);
}

/* ===== La giornata come checklist ===== */
.checklist { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid #BFCEC4; border-radius: 14px; overflow: hidden; }
.cl-voce { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 12px 16px; background: #fff; }
.cl-voce + .cl-voce { border-top: 1px solid #BFCEC4; }
.cl-voce:nth-child(even) { background: #F1F6F2; }
.cl-spunta { width: 22px; height: 22px; margin-top: 1px; border-radius: 999px; border: 2px solid #9DB1A4; background: #fff; position: relative; }
.cl-ass .cl-spunta { border-color: #17803F; background: conic-gradient(#17803F 0 50%, #fff 50% 100%); }
.cl-fatto .cl-spunta { border-color: #17803F; background: #17803F; }
.cl-fatto .cl-spunta::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.cl-fatto .cl-titolo { color: #5A675F; text-decoration: line-through; text-decoration-color: #9DB1A4; }
.cl-riga1 { display: flex; align-items: center; gap: 8px; }
.cl-titolo { font-weight: 600; color: var(--testo); text-decoration: none; }
.cl-titolo:hover { color: #0B6B32; text-decoration: underline; }
.cl-orologio { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; border: 1px solid #CBD6CF; background: #fff; color: #0B6B32; display: grid; place-items: center; cursor: pointer; }
.cl-orologio svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cl-orologio[aria-expanded="true"] { background: #17803F; border-color: #17803F; color: #fff; }
.cl-cliente { font-size: 12.5px; color: #5A675F; }
.cl-cliente a { color: inherit; text-decoration: underline; text-decoration-color: #BFCEC4; text-underline-offset: 2px; }
.cl-chi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cl-persona { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border-radius: 999px; background: #E3F4EA; color: #0B6B32; font-size: 12.5px; font-weight: 600; }
.cl-persona small { font-weight: 500; color: #36423B; }
.cl-x { width: 20px; height: 20px; border: 0; border-radius: 999px; background: transparent; color: #8E1F1F; cursor: pointer; font-size: 15px; line-height: 1; }
.cl-x:hover { background: #FDECEC; }
.cl-av { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #134A2F; color: #fff; font-size: 10.5px; font-weight: 700; flex: 0 0 auto; }
.cl-storia[hidden] { display: none; }
.cl-storia { margin: 8px 0 2px; padding: 8px 0 0 14px; border-left: 2px solid #17803F; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cl-storia span { display: inline-block; min-width: 82px; color: #5A675F; font-weight: 600; }
.cl-assegna { display: flex; align-items: center; gap: 6px; align-self: center; white-space: nowrap; }
.cl-et { font-size: 12.5px; font-weight: 600; color: #36423B; }
.cl-freccia { width: 36px; height: 36px; border-radius: 999px; border: 1.5px solid #17803F; background: #fff; color: #17803F; display: grid; place-items: center; cursor: pointer; }
.cl-freccia svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.cl-freccia[aria-expanded="true"] { background: #17803F; color: #fff; }
.cl-freccia[aria-expanded="true"] svg { transform: rotate(180deg); transform-origin: 50% 50%; }
.pp-assegna { position: absolute; z-index: 70; width: 290px; background: #fff; border-radius: 16px; border: 1px solid #BFCEC4;
  box-shadow: 0 2px 4px rgba(20,28,23,.1), 0 18px 34px -14px rgba(20,28,23,.5); padding: 10px; }
.pp-testa { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 8px; }
.pp-testa strong { color: #0B6B32; }
.pp-chiudi { width: 28px; height: 28px; border: 0; border-radius: 999px; background: #F1F6F2; cursor: pointer; font-size: 17px; }
.pp-orari { display: flex; gap: 8px; padding: 0 4px 8px; border-bottom: 1px solid #DCE4DE; }
.pp-orari label { flex: 1; margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #36423B; }
.pp-orari input { min-height: 36px; margin-top: 3px; padding: 0 8px; font-size: 13px; }
.pp-elenco { display: flex; flex-direction: column; max-height: 260px; overflow: auto; padding-top: 4px; }
.pp-op { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; font: inherit; }
.pp-op:hover, .pp-op:focus-visible { background: #E3F4EA; }
.pp-nome { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.pp-nome small { font-size: 11.5px; font-weight: 500; color: #5A675F; }

/* ===== La giornata v2: spunte su una linea + schede bianche (spunti: chore chart / recruitment) ===== */
.card-giornata { background: #F3F6F4; }
.gg-testa { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 10px; }
.gg-et { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #36423B; }
.gg-anello { --p: 0; position: relative; width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center;
  background: conic-gradient(#17803F calc(var(--p) * 1%), #DCE4DE 0); }
.gg-anello::before { content: ""; position: absolute; inset: 5px; border-radius: 999px; background: #F3F6F4; }
.gg-anello b { position: relative; font-size: 16px; line-height: 1; color: #0B6B32; margin-top: -6px; }
.gg-anello b small { font-size: 9px; }
.gg-anello i { position: absolute; bottom: 12px; font-style: normal; font-size: 6.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5A675F; }
.checklist { list-style: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: visible; position: relative; display: flex; flex-direction: column; gap: 12px; }
/* la linea verticale che unisce le spunte */
.checklist::before { content: ""; position: absolute; left: 10px; top: 18px; bottom: 18px; width: 2px; background: #CBD6CF; }
.cl-voce, .cl-voce:nth-child(even) { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 0; background: transparent; align-items: start; }
.cl-voce + .cl-voce { border-top: 0; }
.cl-spunta { position: relative; z-index: 1; width: 22px; height: 22px; margin-top: 14px; border-radius: 6px; border: 2px solid #9DB1A4; background: #fff; }
.cl-ass .cl-spunta { border-color: #17803F; background: #fff; }
.cl-ass .cl-spunta::after { content: ""; position: absolute; inset: 4px; border-radius: 2px; background: #7BD08F; }
.cl-fatto .cl-spunta { border-color: #17803F; background: #17803F; }
.cl-fatto .cl-spunta::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); background: none; inset: auto; }
.cl-scheda { background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 1px 2px rgba(20,28,23,.08), 0 4px 10px -6px rgba(20,28,23,.3); }
.cl-riga1 { display: flex; align-items: center; gap: 10px; }
.cl-titolo { flex: 1 1 auto; font-weight: 700; font-size: 14.5px; }
.cl-ora { font-size: 12.5px; font-weight: 600; color: #36423B; white-space: nowrap; }
.cl-da .cl-ora { color: #A85A00; }
.cl-fatto .cl-ora { color: #17803F; }
.cl-cliente { margin-top: 2px; }
.cl-cliente .mono { color: #5A675F; }
.cl-piede { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #DCE4DE; }
.cl-chi { margin: 0; }
.cl-persona { background: #fff; border: 1.5px solid #17803F; padding: 2px 4px 2px 2px; }
.cl-assegna { margin-left: auto; }
.cl-freccia { width: 32px; height: 32px; }
.cl-storia { margin-top: 10px; }

/* ===== La giornata: lavori larghi come 4 tessere, a destra le informazioni ===== */
.gg-impianto { display: grid; grid-template-columns: calc((100% - 40px) * 2 / 3 + 28px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cl-scheda { cursor: pointer; border: 2px solid transparent; transition: border-color .12s, box-shadow .12s; }
.cl-scheda:hover { border-color: #CBD6CF; }
.cl-voce.scelto .cl-scheda { border-color: #17803F; box-shadow: 0 0 0 3px #E3F4EA, 0 4px 10px -6px rgba(20,28,23,.3); }
.gg-info { position: sticky; top: 100px; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,28,23,.08), 0 6px 16px -8px rgba(20,28,23,.35); }
.gi-testa { --c: #17803F; background: var(--c); color: #fff; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.gi-tipo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.gi-titolo { font-size: 16px; line-height: 1.3; }
.gi-codice { align-self: flex-start; margin-top: 6px; padding: 2px 10px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.gi-corpo { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.gi-stato { align-self: flex-start; }
.gi-dati { margin: 0; display: grid; grid-template-columns: 92px 1fr; gap: 0; font-size: 13px; }
.gi-dati dt, .gi-dati dd { margin: 0; padding: 6px 0; border-top: 1px solid #DCE4DE; }
.gi-dati dt { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #36423B; padding-top: 8px; }
.gi-dati dd a { color: #0B6B32; font-weight: 600; }
.gi-sez { display: flex; flex-direction: column; gap: 6px; }
.gi-et { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #36423B; }
.gi-chi { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.gi-chi .cl-x { display: none; }
.gi-mat { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.gi-mat li { padding: 3px 10px; border: 1.5px solid #0F7C78; color: #0A5754; border-radius: 999px; font-size: 12px; font-weight: 600; }
.gi-nota { margin: 0; padding: 8px 10px; background: #FFF8E6; border-radius: 10px; font-size: 13px; }
.gi-apri { align-self: stretch; justify-content: center; }
@media (max-width: 1100px) { .gg-impianto { grid-template-columns: 1fr; } .gg-info { position: static; } }

/* l'orologio con la scritta "Storico lavoro" */
.cl-orologio { width: auto; height: 30px; padding: 0 11px 0 7px; gap: 6px; display: inline-flex; align-items: center;
  font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ===== Le ore di un operaio: linea del tempo 6-20 ===== */
.card-tempo { --inizio: 6; --fine: 20; }
.card-tempo .testata-pagina { margin-bottom: 8px; align-items: center; }
.tl-scelta { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border: 1.5px solid #17803F; border-radius: 999px; background: #fff; }
.tl-av { width: 30px; height: 30px; font-size: 11px; }
.tl-scelta select { border: 0; background-color: transparent; min-height: 30px; padding: 0 30px 0 2px; font-weight: 600; font-size: 14px; color: #0B6B32; width: auto; box-shadow: none; }
.tl-riepilogo { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tl-riepilogo span { padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #F1F6F2; color: #36423B; }
.tl-riepilogo span b { color: #0B6B32; }
.tl-asse { position: relative; }
.tl-ore { position: relative; height: 18px; font-size: 11px; font-weight: 600; color: #5A675F; }
.tl-ore span { position: absolute; transform: translateX(-50%); }
.tl-pista { position: relative; height: 64px; border-radius: 14px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, #DCE4DE 0 1px, transparent 1px calc(100% / 14)),
    #F7F9F8;
  border: 1px solid #DCE4DE; }
.tl-blocco { position: absolute; top: 8px; bottom: 8px; border-radius: 10px; padding: 6px 9px; overflow: hidden; color: #fff;
  font-size: 11.5px; line-height: 1.25; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 1px 2px rgba(20,28,23,.2); }
.tl-blocco b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-blocco small { opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-lavoro { background: #17803F; }
.tl-sopralluogo { background: #3F48CC; }
.tl-appuntamento { background: #944A92; }
.tl-pausa { background: repeating-linear-gradient(135deg, #E4EAE6 0 6px, #F1F4F2 6px 12px); color: #5A675F; box-shadow: none; }
.tl-ora-ora { position: absolute; top: 0; bottom: 0; left: calc((var(--t) - 6) / 14 * 100%); width: 2px; background: #C63A32; z-index: 2; }
.tl-ora-ora::before { content: "adesso"; position: absolute; top: 2px; left: 4px; font-size: 9.5px; font-weight: 700; color: #C63A32; text-transform: uppercase; letter-spacing: .04em; }
.tl-vuota { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: #5A675F; }
.tl-legenda { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; }
.tl-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.tl-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.tl-legenda .mono { color: #5A675F; }

.tl-blocco, .tl-blocco:hover { color: #fff; text-decoration: none; }
.tl-pausa, .tl-pausa:hover { color: #5A675F; }
.tl-ore { margin: 0 1px; }
.tl-ore span:first-child { transform: none; }
.tl-ore span:last-child { transform: translateX(-100%); }
.tl-ora-ora::before { top: auto; bottom: 2px; }

/* la scheda del lavoro scelto e il pannello: il primo e' gia' acceso dal server */
.gi-pannello[hidden], .tl-operaio[hidden], .pp-assegna[hidden] { display: none; }
.cl-orologio.aperto, .cl-orologio[aria-expanded="true"] { background: #17803F; border-color: #17803F; color: #fff; }
.cl-chi form.in-linea { display: inline; margin: 0; }
.storia-elenco { margin: 0; }
.cl-storia .storia-elenco { padding: 0; }
.tl-legenda i.tl-lavoro { background: #17803F; } .tl-legenda i.tl-appuntamento { background: #944A92; }
/* vista a box dell'Assegnazione Lavori: le schede in due colonne, senza la linea */
.gg-col.vista-box .checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.gg-col.vista-box .checklist::before { display: none; }
/* telefono: tutto in colonna, la timeline scorre di lato */
@media (max-width: 700px) {
  .tl-asse { overflow-x: auto; }
  .tl-ore, .tl-pista { min-width: 640px; }
  .cl-riga1 { flex-wrap: wrap; }
  .cl-piede { flex-wrap: wrap; }
  .topbar { min-height: 0; padding-bottom: 8px; }
}

/* ---------- 31. angolino verde sfumato in basso a sinistra: Timeline e schede dei lavori ---------- */
.card.card-tempo {
  background: radial-gradient(90% 140% at 0% 100%, #CFEBD8 0%, #EAF6EE 30%, #fff 60%);
}
.cl-scheda {
  background: radial-gradient(70% 160% at 0% 100%, #D2ECDA 0%, #EEF8F1 30%, #fff 62%);
}

/* ---------- 32. logo: un po' di bianco sopra le antenne ---------- */
.sb-brand, .sb-brand.con-logo { padding: 11px 10px 6px; align-items: flex-end; }
.sb-brand img.sb-logo { max-height: calc(var(--altezza-logo, 74px) - 17px); }

/* ---------- 33. sfumatura piu' piccola, in basso a destra ---------- */
.card.card-tempo { background: radial-gradient(42% 90% at 100% 100%, #CFEBD8 0%, #EAF6EE 35%, #fff 70%); }
.cl-scheda { background: radial-gradient(34% 110% at 100% 100%, #D2ECDA 0%, #EEF8F1 35%, #fff 70%); }

/* ---------- 34. frecce per cambiare giorno attorno alla data ---------- */
.nav-data { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.nd-freccia {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  border: 1.5px solid #17803F; color: #17803F; text-decoration: none; font-size: 16px; font-weight: 700; line-height: 1;
  letter-spacing: 0;
}
.nd-freccia:hover { background: #17803F; color: #fff; }
.nd-testo { white-space: nowrap; }
.nd-oggi { margin-left: 4px; color: #0B6B32; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ---------- 35. frecce della data piu' grandi e piu' distanziate ---------- */
.nav-data { gap: 14px; }
.nd-freccia { width: 34px; height: 34px; font-size: 22px; border-width: 2px; padding-bottom: 2px; }
.nd-testo { font-size: 12px; }
.card-tempo .occhiello, .card-giornata .occhiello { margin-bottom: 6px; }

/* ---------- 36. logo: piu' bianco sopra le antenne (il disegno arriva al bordo dell'immagine) ---------- */
.sb-brand, .sb-brand.con-logo { padding: 16px 12px 6px; }
.sb-brand img.sb-logo { max-height: calc(var(--altezza-logo, 74px) - 22px); }

/* ---------- 37. frecce un po' piu' piccole, data un po' piu' grande ---------- */
.nd-freccia { width: 30px; height: 30px; font-size: 19px; }
.nd-testo { font-size: 13.5px; }
.occhiello-data { margin: 6px 0 0; }
.card-tempo .titolo-banco, .card-giornata .titolo-banco { margin: 0; }

/* ---------- 38. logo: le antenne arrivano al bordo bianco, niente spazio sopra ---------- */
.sb-brand, .sb-brand.con-logo { padding: 0 10px 5px; align-items: flex-start; overflow: hidden; }
.sb-brand img.sb-logo { max-height: calc(var(--altezza-logo, 74px) - 5px); max-width: 100%; }

/* ---------- 39. menu: la freccetta dei gruppi subito dopo il nome, piu' marcata ---------- */
.sidebar .tabs details.tab-menu > summary .tab-icona { order: 0; }
.sidebar .tabs details.tab-menu > summary .tab-testo { order: 1; flex: 0 1 auto; }
.sidebar .tabs details.tab-menu > summary .tab-freccia {
  order: 2; margin-left: 2px; opacity: 1; font-size: 14px; font-weight: 700; color: #fff;
  -webkit-text-stroke: .4px #fff;
}
.sidebar .tabs details.tab-menu > summary .pallino { order: 3; margin-left: auto; }
.sidebar .tabs summary .pallino + .tab-freccia { margin-left: 2px; }

/* ---------- 40. il blocco frecce + data su fondo giallo, come la barra in alto ---------- */
.nav-data { background: var(--fascia-chiara, #F8F1D8); padding: 4px 10px 4px 4px; border-radius: 999px; }
.nav-data .nd-freccia { background: #fff; }
.nav-data .nd-freccia:hover { background: #17803F; }
.nd-testo { color: #000; }

/* ---------- 41. la pillola gialla della data: bordino verde leggero e ombretta ---------- */
.nav-data { border: 1px solid rgba(23, 128, 63, .35); box-shadow: 0 2px 5px -2px rgba(20, 28, 23, .35); }
/* frecce un po' piu' piccole e piu' vicine alla data */
.nav-data { gap: 8px; padding: 3px 8px 3px 3px; }
.nd-freccia { width: 26px; height: 26px; font-size: 17px; }

/* ---------- 42. stessi titoli di "Assegnazione Lavori" (21 px) ---------- */
.topbar .tb-saluto h1 { font-size: 21px; font-weight: 600; }
.home-griglia h2.titolo-sezione { font-size: 21px; font-weight: 600; }
.home-griglia h2.titolo-sezione > span:first-child { width: 40px; height: 40px; }
@media (max-width: 700px) { .topbar .tb-saluto h1 { font-size: 17px; } }

/* ---------- 43. "Oggi · N lavori aperti" grande come il titolo dei lavori ---------- */
.gg-et { font-size: 14.5px; font-weight: 700; letter-spacing: .04em; color: #1B2620; }

/* =========================================================================
   v5.2 — pagine dei lavori (Lavori, Appalti, Commesse, Segnalazioni,
   Sopralluoghi): titolo e pulsanti dentro la barra colorata, stati come
   parole sotto la barra, poi il testo e il box (anteprima approvata 03-10)
   ========================================================================= */
.barra-titolo {
  display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap;
  margin: -22px 0 0; padding: 14px 18px; border-radius: 0 0 18px 18px;
  background: var(--cat); color: #fff; box-shadow: 0 10px 20px -14px rgba(20, 28, 23, .9);
}
.contenuto > .flash ~ .barra-titolo, .contenuto > .errore ~ .barra-titolo { margin-top: 0; border-radius: 18px; }
.bt-titolo { display: flex; flex-direction: column; line-height: 1.1; }
.bt-occhiello { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #F2D45C; }
.bt-titolo h1 { margin: 2px 0 0; color: #fff; font-size: 26px; font-weight: 700; }
/* il pulsante "nuovo": bianco, testo nel colore scuro della sezione */
.bt-nuovo > summary, .bt-nuovo-btn {
  list-style: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--cat-scuro);
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer;
  text-decoration: none; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5);
}
.bt-nuovo > summary::-webkit-details-marker { display: none; }
.bt-nuovo > summary .ico, .bt-nuovo-btn .ico { width: 16px; height: 16px; }
.bt-nuovo-btn:hover, .bt-nuovo > summary:hover { background: #F1F6F2; }
.bt-nuovo { position: relative; }
.bt-nuovo .tm-tendina { color: var(--testo); }
.bt-destra { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bt-btn {
  min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .85);
  color: #fff; background: transparent; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 13px; text-decoration: none;
}
.bt-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.bt-btn .ico { width: 16px; height: 16px; }
.bt-verde { background: #17803F; border-color: #17803F; }
.bt-viola { background: #944A92; border-color: #944A92; }
.bt-blu   { background: #3F48CC; border-color: #3F48CC; }
.bt-rosso { background: #C63A32; border-color: #C63A32; }
.bt-verde:hover, .bt-viola:hover, .bt-blu:hover, .bt-rosso:hover { filter: brightness(1.1); }
.barra-titolo .switch-vista { background: rgba(255, 255, 255, .22); }
.barra-titolo .switch-vista .sv-voce { color: #fff; }
.barra-titolo .switch-vista .sv-voce[aria-pressed="true"] { background: #fff; color: var(--cat-scuro); }
/* gli stati come parole */
.filtri-parole { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; margin: 18px 2px 0; }
.fpar { font-size: 14px; font-weight: 600; color: #36423B; text-decoration: none; padding: 4px 0; border-bottom: 2.5px solid transparent; }
.fpar:hover { color: var(--cat-scuro); border-bottom-color: #BFCEC4; }
.fpar.on { color: var(--cat-scuro); border-bottom-color: var(--cat); }
.fp-tendine { margin-left: auto; }
.fp-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.fp-form select { width: auto; min-width: 140px; min-height: 36px; padding: 0 30px 0 12px; border-radius: 999px; background-color: #fff; font-size: 12.5px; }
/* il testo, con aria sopra e sotto */
.testo-pagina { max-width: 860px; margin: 26px 2px 26px; font-size: 13.5px; line-height: 1.6; color: #26302A; }
.filtri-parole + .card, .filtri-parole + .sop-impianto, .filtri-parole + .griglia-box,
.filtri-parole + .pannello-form + .card, .filtri-parole + div[class*="card"] { margin-top: 24px; }
.filtri-parole ~ .card-tabella, .filtri-parole ~ .sop-impianto { margin-top: 24px; }
.testo-pagina ~ .card-tabella { margin-top: 0; }
@media (max-width: 700px) {
  .barra-titolo { margin-top: -16px; padding: 12px 14px; }
  .bt-destra { margin-left: 0; width: 100%; }
  .fp-tendine { margin-left: 0; width: 100%; }
}
@media (min-width: 701px) and (max-width: 1000px) { .barra-titolo { margin-top: -20px; } }

/* =========================================================================
   v5.3 — barre sempre verde scuro (come il menu), intestazione delle tabelle
   nel colore della sezione, sfondo bianco -> giallino -> verde
   ========================================================================= */
/* la barra sotto la testata gialla: sempre il verde scuro del menu */
.barra-titolo,
.contenuto .barra-sezione,
.contenuto[class*="cat-"] form.filtri.barra-sezione[method="get"] {
  background: linear-gradient(180deg, var(--scuro-2) 0%, var(--scuro-3) 100%);
}
.barra-titolo .bt-nuovo > summary, .barra-titolo .bt-nuovo-btn { color: var(--scuro-1); }
.barra-titolo .switch-vista .sv-voce[aria-pressed="true"],
.barra-sezione .switch-vista .sv-voce[aria-pressed="true"] { color: var(--scuro-1); }
.barra-sezione .pf.pf-on { color: var(--scuro-1); }
.contenuto form.barra-sezione .btn, .contenuto[class*="cat-"] form.barra-sezione .btn { color: var(--scuro-1); }

/* la fascia con i nomi delle colonne: il colore della sezione
   (verde lavori, antracite appalti, viola commesse, rosso segnalazioni...) */
table.elenco th { background: var(--cat, var(--ink-2)); }

/* lo sfondo della pagina: bianco in alto, giallino a meta', verde in fondo */
body {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF4DA 50%, #7E9F86 100%);
  background-color: #FBF4DA;
}

/* ---------- 44. Avvisi, Preventivi, Documenti, Calendario con la barra ---------- */
.fp-form input[type=search] { width: 220px; min-height: 36px; border-radius: 999px; background-color: #fff; font-size: 12.5px; padding: 0 14px; }
.fp-form .btn { min-height: 36px; }
.fp-azzera { align-self: center; font-size: 13px; font-weight: 600; color: var(--cat-scuro); }
.filtri-solo { justify-content: flex-start; }
.filtri-solo .fp-form { margin-right: auto; }
.spazio-barra { height: 22px; }
.filtri-parole + .card-nuovo-prev, .filtri-parole + .card { margin-top: 24px; }
.filtri-parole ~ .card-tabella { margin-top: 24px; }
.testo-pagina + .doc-azioni-top { margin-top: 0; }

/* ---------- 45. sfondo della pagina: torna quello di prima (grigio-verde) ---------- */
body {
  background: linear-gradient(180deg, #E2E9E4 0%, #B9C4BD 72%, #9DAAA2 100%);
  background-color: #B9C4BD;
}

/* ---------- 46. Avvisi: il riquadro con il bordino del verde della barra ---------- */
.card.card-elenco { border: 2px solid var(--scuro-2); }
/* Calendario: i riquadri col bordino blu; Preventivi: marrone */
#segna-appuntamento, .cal-layout .card, .cal-principale .card { border: 2px solid #3F48CC; }
.contenuto.cat-preventivi > .card { border: 2px solid #8B5A3C; }
.spazio-barra ~ .card { border: 2px solid #3F48CC; }
/* Lavori, Appalti, Commesse, Sopralluoghi: bordino dei riquadri nel colore della sezione */
.contenuto.cat-lavori > .card, .contenuto.cat-appalti > .card, .contenuto.cat-commesse > .card,
.contenuto.cat-sopralluoghi > .card, .contenuto.cat-sopralluoghi .sop-impianto .card,
.contenuto.cat-sopralluoghi .sop-riga,
.contenuto.cat-lavori .box-voce, .contenuto.cat-commesse .box-voce, .contenuto.cat-sopralluoghi .box-voce,
.contenuto.cat-commesse > .pannello-sfondo, .contenuto.cat-appalti > .pannello-sfondo { border: 2px solid var(--cat); }
/* Magazzino (verde acqua) e Documenti (antracite): bordino nel colore della sezione */
.contenuto.cat-magazzino > .card, .contenuto.cat-magazzino > .pannello-sfondo,
.contenuto.cat-documenti .doc-impianto .card, .contenuto.cat-documenti > .card { border: 2px solid var(--cat); }
.contenuto.cat-magazzino .tessere-mini { margin-top: 0; }
/* Meteo: blu scuro, e riquadri col bordino blu scuro */
.cat-meteo { --cat: #1E3A8A; --cat-scuro: #172E6E; --cat-chiaro: #E6ECFA; --cat-tenue: #9DB2F0; }
.contenuto.cat-meteo .card { border: 2px solid #1E3A8A; }

/* ---------- 47. riga sotto il mouse: il chiaro del colore della sezione ---------- */
.contenuto.cat-lavori table.elenco > tbody > tr:hover > td,
.contenuto.cat-appalti table.elenco > tbody > tr:hover > td,
.contenuto.cat-commesse table.elenco > tbody > tr:hover > td,
.contenuto.cat-segnalazioni table.elenco > tbody > tr:hover > td { background: var(--cat-chiaro); }
.contenuto.cat-appalti table.elenco > tbody > tr:hover > td { background: #DDE3DF; }

/* ---------- 48. Magazzino e Documenti: tutti i riquadri col bordino della sezione ---------- */
.contenuto.cat-magazzino .tessere-mini .tessera,
.contenuto.cat-magazzino .card,
.contenuto.cat-documenti .cartella, .contenuto.cat-documenti .doc-scheda,
.contenuto.cat-documenti .doc-drop, .contenuto.cat-documenti .card { border: 2px solid var(--cat); }
.contenuto.cat-documenti .doc-drop { border-style: dashed; }

/* ---------- 49. riquadro del logo e voce attiva del menu: giallo come la testata ---------- */
.sb-brand, .sb-brand.con-logo { background: var(--fascia-chiara, #F8F1D8); }
/* il logo ha il fondo bianco: "multiply" lo fa sparire nel giallo */
.sb-brand img.sb-logo { mix-blend-mode: multiply; }
.sidebar .tabs > a.attiva, .sidebar .tab-tendina a.attiva { background: var(--fascia-chiara, #F8F1D8); }

/* ---------- 50. Segnalazioni: filtri corti, tutto su una riga; riquadri col bordo rosso ---------- */
.contenuto.cat-segnalazioni .fp-form select { min-width: 0; width: 108px; padding-right: 26px; background-position: right 8px center; }
@media (min-width: 1200px) {
  .contenuto.cat-segnalazioni .filtri-parole { flex-wrap: nowrap; gap: 6px 16px; }
  .contenuto.cat-segnalazioni .fpar { white-space: nowrap; font-size: 13.5px; }
  .contenuto.cat-segnalazioni .fp-form { flex-wrap: nowrap; gap: 6px; }
}
.contenuto.cat-segnalazioni > .card, .contenuto.cat-segnalazioni .box-voce { border: 2px solid var(--cat); }

/* ---------- 51. Sopralluoghi a righe: il calendario va sotto la tabella ---------- */
.sop-impianto:has(> .sop-colonna > .card-tabella:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
.sop-impianto:has(> .sop-colonna > .card-tabella:not([hidden])) .sop-cal { max-width: 760px; }

/* ---------- 52. bordini sottili dappertutto, come le tessere della Home ---------- */
.card.card-elenco,
#segna-appuntamento, .cal-layout .card, .cal-principale .card, .spazio-barra ~ .card,
.contenuto.cat-preventivi > .card,
.contenuto.cat-lavori > .card, .contenuto.cat-appalti > .card, .contenuto.cat-commesse > .card,
.contenuto.cat-sopralluoghi > .card, .contenuto.cat-sopralluoghi .sop-impianto .card, .contenuto.cat-sopralluoghi .sop-riga,
.contenuto.cat-lavori .box-voce, .contenuto.cat-commesse .box-voce, .contenuto.cat-sopralluoghi .box-voce,
.contenuto.cat-commesse > .pannello-sfondo, .contenuto.cat-appalti > .pannello-sfondo,
.contenuto.cat-magazzino .tessere-mini .tessera, .contenuto.cat-magazzino .card, .contenuto.cat-magazzino > .pannello-sfondo,
.contenuto.cat-documenti .cartella, .contenuto.cat-documenti .doc-scheda, .contenuto.cat-documenti .card,
.contenuto.cat-meteo .card,
.contenuto.cat-segnalazioni > .card, .contenuto.cat-segnalazioni .box-voce {
  border-width: 1px;
  border-color: color-mix(in srgb, var(--cat, #134A2F) 45%, transparent);
}
.card.card-elenco { border-color: color-mix(in srgb, #134A2F 45%, transparent); }
#segna-appuntamento, .cal-layout .card, .cal-principale .card, .spazio-barra ~ .card { border-color: color-mix(in srgb, #3F48CC 45%, transparent); }
.contenuto.cat-preventivi > .card { border-color: color-mix(in srgb, #8B5A3C 45%, transparent); }
.contenuto.cat-meteo .card { border-color: color-mix(in srgb, #1E3A8A 45%, transparent); }
.contenuto.cat-documenti .doc-drop { border-width: 1px; }

/* ---------- 53. Home: i due riquadri nuovi col bordino verde, sfumatura piu' forte ---------- */
.card.card-tempo, .card.card-giornata { border: 1px solid color-mix(in srgb, #17803F 45%, transparent); }
.card.card-tempo { background: radial-gradient(48% 100% at 100% 100%, #B9E2C6 0%, #DDF1E4 38%, #fff 72%); }
.cl-scheda { background: radial-gradient(40% 120% at 100% 100%, #BEE4CA 0%, #E1F3E7 38%, #fff 72%); }

/* ---------- 54. Sopralluoghi: tabella in alto staccata, sotto schede strette + calendario a fianco ---------- */
.sop-impianto,
.sop-impianto:has(> .sop-colonna > .card-tabella:not([hidden])) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); gap: 16px; align-items: start;
}
.sop-impianto > .sop-colonna { display: contents; }
.sop-impianto > .sop-colonna > .card-tabella { grid-column: 1 / -1; margin-bottom: 18px; }
.sop-impianto > .sop-colonna > .sop-lista { grid-column: 1; }
.sop-impianto > .sop-colonna > .sop-lista[hidden] { display: flex; }
.sop-impianto > .sop-cal { grid-column: 2; max-width: none; }
.sop-impianto:has(> .sop-colonna > .card-tabella:not([hidden])) .sop-cal { max-width: none; }
@media (max-width: 1100px) {
  .sop-impianto, .sop-impianto:has(> .sop-colonna > .card-tabella:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .sop-impianto > .sop-cal { grid-column: 1; }
}

/* ---------- 55. vista a box: piu' aria fra i filtri e i box ---------- */
.filtri-parole ~ .griglia-box { margin-top: 26px; }
.testo-pagina ~ .griglia-box { margin-top: 0; }

/* ---------- 56. Sopralluoghi a righe: niente schede sotto, calendario di due settimane largo ---------- */
.sop-impianto > .sop-colonna > .sop-lista[hidden] { display: none; }
.sop-impianto > .sop-cal[hidden] { display: none; }
.sop-impianto > .sop-cal2 { grid-column: 1 / -1; }
.sop-cal2 .calendario-mese td { height: 96px; }
.sop-cal2 .calendario-mese td .cm-voce.sopralluogo { display: block; white-space: normal; margin-top: 4px; font-size: 11.5px; padding: 3px 7px; }

/* ---------- 57. la riga dei titoli colonne colorata fino in fondo (anche sopra la colonna dei pulsanti) ---------- */
table.elenco tr:has(> th) { background: var(--cat, var(--ink-2)); }
/* Magazzino: le tre tessere tutte nel verde acqua della sezione */
.contenuto.cat-magazzino .tessere-mini .tessera { --t: var(--cat); --t-scuro: var(--cat-scuro); --tono: var(--cat); --tono-chiaro: var(--cat-chiaro); }
.contenuto.cat-magazzino .tessere-mini .tessera .tz-etichetta,
.contenuto.cat-magazzino .tessere-mini .tessera .tz-numero { color: var(--cat-scuro); }
.contenuto.cat-magazzino .tessere-mini .tessera .tz-icona { background: var(--cat); }
.contenuto.cat-magazzino .tessere-mini .tessera .tz-icona .ico { color: #fff; }

/* ---------- 58. Magazzino: la prima tessera piena col testo bianco ---------- */
.contenuto.cat-magazzino .tessere-mini .tessera.tessera-piena { background: var(--cat); }
.contenuto.cat-magazzino .tessere-mini .tessera.tessera-piena .tz-etichetta,
.contenuto.cat-magazzino .tessere-mini .tessera.tessera-piena .tz-numero,
.contenuto.cat-magazzino .tessere-mini .tessera.tessera-piena .tz-nota { color: #fff; opacity: 1; }
.contenuto.cat-magazzino .tessere-mini .tessera.tessera-piena .tz-icona { background: rgba(255, 255, 255, .2); }

/* ---------- 59. righe alternate: il chiaro del colore della sezione (non piu' verde) ---------- */
.contenuto.cat-appalti table.elenco > tbody > tr:nth-child(even):not(.riga-riparazione) > td,
.contenuto.cat-commesse table.elenco > tbody > tr:nth-child(even):not(.riga-riparazione) > td,
.contenuto.cat-segnalazioni table.elenco > tbody > tr:nth-child(even):not(.riga-riparazione) > td,
.contenuto.cat-sopralluoghi table.elenco > tbody > tr:nth-child(even):not(.riga-riparazione) > td,
.contenuto.cat-magazzino table.elenco > tbody > tr:nth-child(even):not(.riga-riparazione) > td {
  background: color-mix(in srgb, var(--cat) 7%, #fff);
}
.contenuto.cat-appalti table.elenco > tbody > tr > td, .contenuto.cat-commesse table.elenco > tbody > tr > td,
.contenuto.cat-segnalazioni table.elenco > tbody > tr > td, .contenuto.cat-sopralluoghi table.elenco > tbody > tr > td,
.contenuto.cat-magazzino table.elenco > tbody > tr > td { border-bottom-color: color-mix(in srgb, var(--cat) 25%, #fff); }
.contenuto.cat-appalti table.elenco > tbody > tr:hover > td, .contenuto.cat-commesse table.elenco > tbody > tr:hover > td,
.contenuto.cat-segnalazioni table.elenco > tbody > tr:hover > td, .contenuto.cat-sopralluoghi table.elenco > tbody > tr:hover > td,
.contenuto.cat-magazzino table.elenco > tbody > tr:hover > td { background: color-mix(in srgb, var(--cat) 16%, #fff); }

/* ---------- 61. vista a righe: i box sotto le righe non si vedono (display:grid vinceva su [hidden]) ---------- */
.griglia-box[hidden], [data-vista-pannello][hidden] { display: none !important; }

/* ---------- 62. Assegnazione Lavori: bordo dei lavori piu' spesso con ombrettina, scheda di destra gialla ---------- */
.cl-scheda { border: 2px solid color-mix(in srgb, #17803F 45%, transparent); box-shadow: 0 2px 6px -2px rgba(20, 28, 23, .35); }
.cl-voce.scelto .cl-scheda { border-color: #17803F; box-shadow: 0 0 0 3px #E3F4EA, 0 3px 8px -3px rgba(20, 28, 23, .4); }
.gg-info { background: var(--fascia-chiara, #F8F1D8); }
.gg-info .gi-corpo { background: var(--fascia-chiara, #F8F1D8); }
.gg-info .gi-dati dt, .gg-info .gi-dati dd { border-top-color: #E4D9AE; }

/* ---------- 63. passaggio del mouse: il chiaro della sezione su TUTTE le righe (prima le pari vincevano) ---------- */
.contenuto table.elenco > tbody > tr:nth-child(n):not(.riga-riparazione):hover > td,
.contenuto[class*="cat-"] table.elenco > tbody > tr:nth-child(n):not(.riga-riparazione):hover > td {
  background: color-mix(in srgb, var(--cat, #17803F) 16%, #fff);
}

/* 64. Schede interne: elementi ben divisi dentro i box */
/* scheda lavoro: il blocco preventivo su fondo giallo, chi ci lavora con bordo verde leggero */
.fp-lato .modulo-blocco.mb-preventivo { background: var(--fascia-chiara, #F8F1D8); border: 1px solid #ecdca6; }
.contenuto .card.card-assegnati { border: 2px solid #9fd4b0 !important; }
/* tessere della testata: bordo, numero meno pesante, icona bianca sul quadratino colorato */
.scheda-testa .tessere-mini .tessera { border: 1px solid color-mix(in srgb, var(--cat, #17803F) 30%, #fff); box-shadow: none; }
.scheda-testa .tessere-mini .tz-numero { font-weight: 600; font-size: 22px; }
.scheda-testa .tz-icona { background: var(--cat, var(--tono)) !important; }
.contenuto[class*="cat-"] .scheda-testa .tz-icona .ico,
.scheda-testa .tz-icona .ico { color: #fff !important; }
/* elenchi dentro le schede: contorno attorno alla tabella */
.scheda-testa ~ .card .tabella-scroll { border: 1px solid color-mix(in srgb, var(--cat, #17803F) 30%, #fff); border-radius: 12px; overflow: hidden; }
.scheda-testa ~ .card .tabella-scroll table.elenco { margin: 0; }
.scheda-testa ~ .card table.elenco > tbody > tr > td { border-bottom: 1px solid color-mix(in srgb, var(--cat, #17803F) 16%, #fff); }
/* blocchi e note dentro i box: contorno pieno, non solo la riga in alto */
.scheda-testa ~ .card .nota-box,
.scheda-testa .nota-box { border: 1px solid color-mix(in srgb, var(--cat, #17803F) 28%, #fff); border-top: 4px solid #f0c94a; }
.scheda-testa ~ .card .blocco-appalto, .card.blocco-appalto .nota-box { border-color: color-mix(in srgb, var(--cat, #17803F) 28%, #fff); }
/* coppie etichetta / valore con una riga fra l'una e l'altra */
.contenuto .kv { gap: 0 18px; border: 1px solid color-mix(in srgb, var(--cat, #17803F) 22%, #fff); background: #fff; }
.contenuto .kv > dt, .contenuto .kv > dd { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--cat, #17803F) 16%, #fff); align-self: stretch; }
.contenuto .kv > dt:nth-last-of-type(1), .contenuto .kv > dd:nth-last-of-type(1) { border-bottom: 0; }
.descr-box { border: 1px solid color-mix(in srgb, var(--cat, #17803F) 22%, #fff); border-radius: 12px; padding: 10px 16px 4px; margin: 0 0 16px; }
.descr-box .mb-titolo { margin: 0 0 4px; }
/* sopralluogo: le tappe dell'avanzamento separate da una riga */
.scheda-testa .timeline li + li { border-top: 1px solid color-mix(in srgb, var(--cat, #17803F) 16%, #fff); padding-top: 10px; }
.scheda-testa .timeline li:not(:last-child)::before { top: 37px; }
.scheda-testa .timeline li:first-child:not(:last-child)::before { top: 27px; }
.scheda-testa .griglia2 > div + div { border-left: 1px solid color-mix(in srgb, var(--cat, #17803F) 16%, #fff); padding-left: 18px; }
.scheda-testa .griglia2 .titolo-sezione { border-top: 1px solid color-mix(in srgb, var(--cat, #17803F) 16%, #fff); padding-top: 14px; }
.scheda-testa .griglia2 > div > .titolo-sezione:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 760px) { .scheda-testa .griglia2 > div + div { border-left: 0; padding-left: 0; } }

/* 65. Calendario: i giorni della settimana scelta in blu tenue invece che verde */
.cm-sett { background: linear-gradient(180deg, #eef3ff 0%, #dde7fb 100%); color: #1E3A8A; }

/* 66. Righe divisorie piu' spesse dentro le schede di segnalazioni e sopralluoghi */
.cat-segnalazioni .scheda-testa .kv, .cat-sopralluoghi .scheda-testa .kv,
.cat-segnalazioni .scheda-testa .descr-box { border-width: 2px; border-color: color-mix(in srgb, var(--cat) 30%, #fff); }
.cat-segnalazioni .scheda-testa .kv > dt, .cat-segnalazioni .scheda-testa .kv > dd,
.cat-sopralluoghi .scheda-testa .kv > dt, .cat-sopralluoghi .scheda-testa .kv > dd { border-bottom-width: 2px; border-bottom-color: color-mix(in srgb, var(--cat) 26%, #fff); }
.cat-segnalazioni .scheda-testa .kv > dt:nth-last-of-type(1), .cat-segnalazioni .scheda-testa .kv > dd:nth-last-of-type(1),
.cat-sopralluoghi .scheda-testa .kv > dt:nth-last-of-type(1), .cat-sopralluoghi .scheda-testa .kv > dd:nth-last-of-type(1) { border-bottom: 0; }
.cat-segnalazioni .scheda-testa .timeline li + li, .cat-sopralluoghi .scheda-testa .timeline li + li,
.cat-segnalazioni .scheda-testa .griglia2 .titolo-sezione, .cat-sopralluoghi .scheda-testa .griglia2 .titolo-sezione { border-top-width: 2px; border-top-color: color-mix(in srgb, var(--cat) 26%, #fff); }
.cat-segnalazioni .scheda-testa .griglia2 > div + div, .cat-sopralluoghi .scheda-testa .griglia2 > div + div { border-left-width: 2px; border-left-color: color-mix(in srgb, var(--cat) 26%, #fff); }
.cat-segnalazioni .scheda-testa .griglia2 > div > .titolo-sezione:first-child, .cat-sopralluoghi .scheda-testa .griglia2 > div > .titolo-sezione:first-child { border-top: 0; }

/* 67. Home: titolo centrato fra le tessere e i box di sotto */
.titolo-organizza { text-align: center; color: #134A2F; font-size: 24px; font-weight: 700; margin: 22px 0 18px; letter-spacing: -.01em; }
.titolo-organizza span { color: #D29A1A; }
@media (max-width: 640px) { .titolo-organizza { font-size: 19px; margin: 16px 0 12px; } }

/* 68. Schede interne: fondo dei box #eeefe8, i campi da compilare restano bianchi */
.contenuto:has(.scheda-testa) .card { background: #eeefe8; }
.contenuto:has(.scheda-testa) .card :is(.kv, .descr-box, .tessere-mini .tessera, .nota-box, .zona-file, .accordeon, .blocco-appalto, .fp-lato .modulo-blocco:not(.mb-preventivo):not(.mb-verde), .elenco-origini, .riga-origine) { background: #eeefe8; }
.contenuto:has(.scheda-testa) .card .tessere-mini .tessera::before { opacity: .35; }
.contenuto:has(.scheda-testa) .card :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=search], input[type=time], input:not([type]), select, textarea, .campo-add, .scelta-giorni > summary) { background-color: #fff; }
.contenuto:has(.scheda-testa) .card .campo-add input { background-color: transparent; }

/* 69. Home: i due titoli un po' piu' grandi e con piu' aria sopra */
.titolo-organizza { font-size: 28px; margin: 34px 0 20px; }
.titolo-organizza.titolo-aperti { margin-top: 8px; }
@media (max-width: 640px) { .titolo-organizza { font-size: 21px; margin: 22px 0 14px; } .titolo-organizza.titolo-aperti { margin-top: 16px; } }

/* 70. Segnalazione: i riquadri dentro i box (dati, descrizione, preventivo, gestione) restano bianchi */
.contenuto.cat-segnalazioni:has(.scheda-testa) .card :is(.kv, .descr-box, .nota-box),
.contenuto.cat-sopralluoghi:has(.scheda-testa) .card :is(.kv, .descr-box, .nota-box) { background: #fff !important; }

/* 71. Scheda lavoro, "Chi ci lavora": elenco dipendenti su fondo bianco con riga visibile fra le righe */
.contenuto .card.card-assegnati table.elenco > tbody > tr > td { background: #fff !important; border-bottom: 1.5px solid #b9cdbf !important; }
.contenuto .card.card-assegnati table.elenco > tbody > tr:last-child > td { border-bottom: 0 !important; }
.contenuto .card.card-assegnati table.elenco > tbody > tr:hover > td { background: color-mix(in srgb, var(--cat, #17803F) 12%, #fff) !important; }

/* 72. Appalto: dentro il tratteggiato per caricare i documenti, fondo bianco */
.contenuto.cat-appalti:has(.scheda-testa) .card .zona-file { background: #fff !important; }

/* 73. Commessa: mini box della testata bianchi, elenco lavori bianco con riga visibile fra le righe */
.contenuto.cat-commesse:has(.scheda-testa) .scheda-testa .tessere-mini .tessera { background: #fff !important; }
.contenuto.cat-commesse:has(.scheda-testa) .card table.elenco > tbody > tr > td { background: #fff !important; border-bottom: 1.5px solid color-mix(in srgb, var(--cat) 30%, #fff) !important; }
.contenuto.cat-commesse:has(.scheda-testa) .card table.elenco > tbody > tr:last-child > td { border-bottom: 0 !important; }
.contenuto.cat-commesse:has(.scheda-testa) .card table.elenco > tbody > tr:hover > td { background: color-mix(in srgb, var(--cat) 12%, #fff) !important; }

/* 74. Scheda lavoro: "Tipo di lavoro" e "Date e valore" su verdino chiaro */
.fp-lato .modulo-blocco.mb-verde { background: #e3f3e8 !important; border: 1px solid #bfe0c9; }

/* 75. Magazzino: righe di divisione fra i prodotti un po' piu' spesse */
.contenuto.cat-magazzino table.elenco > tbody > tr > td { border-bottom: 2px solid color-mix(in srgb, var(--cat) 30%, #fff) !important; }
.contenuto.cat-magazzino table.elenco > tbody > tr:last-child > td { border-bottom: 0 !important; }

/* 76. Sfondo esterno: leggera trama (grana fine + righine diagonali) sopra il grigio-verde */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08  0 0 0 0 .2  0 0 0 0 .12  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #E2E9E4 0%, #B9C4BD 72%, #9DAAA2 100%);
  background-color: #B9C4BD;
}

/* 77. Home, Timeline dei Dipendenti: linee delle ore un po' piu' spesse */
.tl-pista { border: 2px solid #c6d3ca;
  background-image: repeating-linear-gradient(90deg, #c6d3ca 0 2px, transparent 2px calc(100% / 14)); }

/* 78. Sopralluogo: fondo dei box azzurrino #e6ecf5 invece del grigio */
.contenuto.cat-sopralluoghi:has(.scheda-testa) .card,
.contenuto.cat-sopralluoghi:has(.scheda-testa) .card :is(.accordeon, .blocco-appalto, .elenco-origini, .riga-origine, .tessere-mini .tessera) { background: #e6ecf5 !important; }

/* 79. Segnalazione: fondo dei box rosato #f5e8ec */
.contenuto.cat-segnalazioni:has(.scheda-testa) .card,
.contenuto.cat-segnalazioni:has(.scheda-testa) .card :is(.accordeon, .blocco-appalto, .elenco-origini, .riga-origine, .tessere-mini .tessera) { background: #f5e8ec !important; }

/* 80. Appalto: mini box della testata bianchi, elenchi bianchi con riga ben visibile fra le righe */
.contenuto.cat-appalti:has(.scheda-testa) .scheda-testa .tessere-mini .tessera { background: #fff !important; }
.contenuto.cat-appalti:has(.scheda-testa) .card table.elenco > tbody > tr > td { background: #fff !important; border-bottom: 1.5px solid color-mix(in srgb, var(--cat) 28%, #fff) !important; }
.contenuto.cat-appalti:has(.scheda-testa) .card table.elenco > tbody > tr:last-child > td { border-bottom: 0 !important; }
.contenuto.cat-appalti:has(.scheda-testa) .card table.elenco > tbody > tr:hover > td { background: color-mix(in srgb, var(--cat) 8%, #fff) !important; }

/* 81. Scheda lavoro, "Tipo di lavoro": il riquadro periodo/valore della commessa su bianco */
.fp-lato .modulo-blocco.mb-verde .kv-commessa { background: #fff !important; }

/* 82. Scheda lavoro: tutti gli elenchi (consuntivo per operaio, giornate...) su bianco con righe e contorno ben definiti */
.contenuto.cat-lavori:has(.scheda-testa) .card .tabella-scroll { border: 0 !important; background: transparent; }
.contenuto.cat-lavori:has(.scheda-testa) .card table.elenco { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1.5px #9fc4ab; }
.contenuto.cat-lavori:has(.scheda-testa) .card table.elenco > tbody > tr > td,
.contenuto.cat-lavori:has(.scheda-testa) .card table.elenco > tfoot > tr > td { background: #fff !important; border-bottom: 1.5px solid #b9cdbf !important; }
.contenuto.cat-lavori:has(.scheda-testa) .card table.elenco > tbody > tr:last-child > td { border-bottom: 0 !important; }
.contenuto.cat-lavori:has(.scheda-testa) .card table.elenco > tbody > tr:hover > td { background: color-mix(in srgb, var(--cat, #17803F) 12%, #fff) !important; }

/* 83. Preventivo, "Le lavorazioni": linee fra le righe e bordo della tabella ben definiti */
#passo-2 .tabella-scroll { border: 0 !important; }
table.elenco.tab-righe { border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--cat, #8B5A3C) 45%, #fff); }
table.elenco.tab-righe > tbody > tr > td { background: #fff !important; border-bottom: 1.5px solid color-mix(in srgb, var(--cat, #8B5A3C) 30%, #fff) !important; }
table.elenco.tab-righe > tbody > tr > td + td { border-left: 1px solid color-mix(in srgb, var(--cat, #8B5A3C) 16%, #fff); }
table.elenco.tab-righe > tfoot > tr > th { background: color-mix(in srgb, var(--cat, #8B5A3C) 7%, #fff) !important; color: var(--cat-scuro, #5e3b26);
  border-top: 1px solid color-mix(in srgb, var(--cat, #8B5A3C) 22%, #fff); }
table.elenco.tab-righe > tfoot > tr:first-child > th { border-top: 2px solid color-mix(in srgb, var(--cat, #8B5A3C) 45%, #fff); }
table.elenco.tab-righe > tfoot > tr.riga-totale > th { background: color-mix(in srgb, var(--cat, #8B5A3C) 14%, #fff) !important; font-weight: 700; }
table.elenco.tab-righe > tfoot > tr { background: transparent !important; }
table.elenco.tab-righe > tfoot > tr > th { border-radius: 0 !important; }

/* 84. Preventivo: contorno come bordo vero (l'ombra veniva tagliata) e righe piu' marcate */
table.elenco.tab-righe { box-shadow: none; border: 1.5px solid color-mix(in srgb, var(--cat, #8B5A3C) 45%, #fff) !important; }
table.elenco.tab-righe > tbody > tr > td { border-bottom-color: color-mix(in srgb, var(--cat, #8B5A3C) 38%, #fff) !important; }
table.elenco.tab-righe > tbody > tr > td.azioni-riga { display: table-cell; text-align: right; white-space: nowrap; }
table.elenco.tab-righe > tbody > tr > td.azioni-riga .btn { display: inline-flex; vertical-align: middle; margin-left: 4px; }

/* 85. Menu a sinistra: il logo non si schiaccia mai e resta in cima anche quando il menu scorre */
.sidebar > .sb-brand { flex-shrink: 0 !important; position: sticky; top: 0; z-index: 5; }
/* la fascia intorno al logo e' piena del verde del menu, cosi' le voci che scorrono non spuntano sopra o ai lati */
.sidebar > .sb-brand { box-shadow: 0 0 0 12px #0E3A24, 0 -14px 0 12px #0E3A24; }

/* 86. Modulo che scende (Nuovo appalto, Nuova commessa...): quando sta direttamente nella pagina
   non va schiarito col resto; resta pieno anche la barra col pulsante che l'ha aperto */
body.pannello-aperto .contenuto > .pannello-form:not([hidden]),
body.pannello-aperto .contenuto > .barra-titolo:has(.apri-pannello[aria-expanded="true"]) { opacity: 1 !important; }

/* 87. Barra di Appalti/Commesse/Lavori: Importa e Template subito dopo "Nuovo ..." */
.barra-titolo > .bt-importa { margin-left: 8px; }
.barra-titolo > .bt-nuovo + .bt-importa, .barra-titolo > .bt-nuovo-btn + .bt-importa { margin-left: 10px; }
@media (max-width: 640px) { .barra-titolo > .bt-importa { margin-left: 0; } }
.barra-titolo > button.bt-importa { font-family: inherit; cursor: pointer; }
/* Importa/Template dentro un riquadro chiaro (Utenti, Operai): bordo e testo scuri */
.card .bt-btn.bt-importa { color: var(--scuro-1, #0E3A24); border-color: var(--scuro-2, #134A2F); background: #fff; font-family: inherit; cursor: pointer; }
.card .bt-btn.bt-importa:hover { background: #F1F6F2; color: var(--scuro-1, #0E3A24); }

/* 88. Marchio in fondo alle pagine e nel login: 40% piu' piccolo */
.fondo-marchio { max-width: 240px; }
.login-v5 .lc-marchio { max-width: 180px; }
@media (max-width: 640px) { .fondo-marchio { max-width: 170px; } }
/* login: il marchio sta in fondo al riquadro bianco; nelle pagine interne un po' piu' piccolo */
.login-v5 .login-card { display: flex; flex-direction: column; }
.login-v5 .lc-marchio { margin: auto auto 0; padding-top: 28px; }
.fondo-marchio { max-width: 200px; }