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