/* ==========================================================================
   Verde in Comune — foglio di stile v2.1
   La Palma Opere del Verde S.r.l.
   Un'interfaccia moderna e pulita: superfici bianche che galleggiano su un
   fondo tenue, verde del marchio come unico colore forte, ombre leggere,
   titoli in evidenza e icone su ogni pulsante. Pensata per il telefono
   quanto per il computer: gli operai la usano dal campo.
   ========================================================================== */

:root {
  /* il verde è quello del marchio: RGB 0,99,42 */
  --verde:        #00632a;
  --verde-scuro:  #04421d;
  --verde-vivo:   #128a46;
  --verde-chiaro: #e6f3ea;
  --verde-tenue:  #f3faf5;

  --grigio:       #eef2ee;
  --superficie:   #ffffff;
  --testo:        #16251a;
  --testo-tenue:  #5c6d61;
  --bordo:        #dce6de;
  --bordo-forte:  #c2d3c6;

  --blu:      #10559a;  --blu-scuro:   #0a3c70;
  --rosso:    #c0392b;  --rosso-scuro: #8e1f14;
  --arancio:  #d97706;  --arancio-scuro:#9a5300;
  --viola:    #6d49b8;  --viola-scuro: #4a2f85;

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

  --ombra-1: 0 1px 2px rgba(12, 38, 20, .05), 0 2px 6px -2px rgba(12, 38, 20, .07);
  --ombra-2: 0 2px 4px rgba(12, 38, 20, .05), 0 10px 26px -12px rgba(12, 38, 20, .22);
  --ombra-3: 0 18px 40px -16px rgba(12, 38, 20, .38);
  --ombra-dentro: inset 0 1px 0 rgba(255, 255, 255, .18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  background: var(--grigio);
  background-image:
    radial-gradient(1200px 420px at 50% -240px, rgba(0, 99, 42, .10), transparent 70%);
  color: var(--testo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--verde); }

/* ---------------------------------------------------------------- barra alta */
.topbar {
  background: linear-gradient(135deg, var(--verde-scuro) 0%, var(--verde) 62%, #0a7a37 100%);
  color: #fff;
  padding: 12px 20px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  box-shadow: var(--ombra-2);
  position: relative; z-index: 40;
}
.topbar .brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit;
}
.topbar .brand-testo { display: flex; flex-direction: column; line-height: 1.15; }
.topbar .brand-testo strong { font-size: 19px; letter-spacing: -.01em; }
.topbar .brand-testo small { opacity: .82; font-size: 12px; }
.topbar .leaf { font-size: 22px; }
/* L'albero del marchio è verde come la barra: gli diamo un tondino bianco */
.topbar .marchio-mini {
  height: 38px; width: 38px; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 4px;
  flex: 0 0 auto; box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}
.userbox { display: flex; align-items: center; gap: 12px; }
.ub-chi { display: flex; flex-direction: column; line-height: 1.15; text-align: right; font-weight: 600; }
.ub-chi small { font-weight: 400; opacity: .8; font-size: 12px; }

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

/* ------------------------------------------------------------ la navigazione */
.tabs {
  background: linear-gradient(180deg, #ffffff, var(--verde-tenue));
  border-bottom: 1px solid var(--bordo);
  padding: 9px 16px;
  display: flex; flex-wrap: wrap; gap: 7px;
  position: relative; z-index: 20;
  box-shadow: var(--ombra-1);
}
.tabs > a, .tabs summary {
  display: flex; align-items: center; gap: 8px;
  color: var(--verde-scuro); text-decoration: none;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 650; font-size: 15px;
  white-space: nowrap; cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.tabs > a:hover, .tabs summary:hover {
  background: #fff; border-color: var(--bordo-forte); box-shadow: var(--ombra-1);
}
.tabs > a.attiva, .tabs details.tab-menu.attiva > summary {
  background: var(--verde); color: #fff;
  border-color: var(--verde-scuro);
  box-shadow: var(--ombra-2), var(--ombra-dentro);
}
.tab-icona { font-size: 17px; line-height: 1; }
.tab-freccia { font-size: 11px; opacity: .7; margin-left: -2px; }

.tabs details.tab-menu { position: relative; }
.tabs details.tab-menu > summary { list-style: none; }
.tabs details.tab-menu > summary::-webkit-details-marker { display: none; }
.tabs details.tab-menu[open] > summary { background: #fff; box-shadow: var(--ombra-1); border-color: var(--bordo-forte); }
.tabs details.tab-menu[open].attiva > summary { background: var(--verde); color: #fff; }

.tab-tendina {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 60;
  min-width: 250px;
  background: #fff; border: 1px solid var(--bordo);
  border-radius: var(--r); padding: 7px;
  box-shadow: var(--ombra-3);
  display: flex; flex-direction: column; gap: 2px;
}
.tab-tendina a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-s);
  color: var(--testo); text-decoration: none; font-weight: 600; font-size: 15px;
}
.tab-tendina a:hover { background: var(--verde-chiaro); color: var(--verde-scuro); }
.tab-tendina a.attiva { background: var(--verde); color: #fff; }

/* Fra tablet e telefono la tendina si apre in linea, senza pannelli volanti */
@media (max-width: 900px) {
  .topbar { padding: 10px 14px; }
  .tabs { padding: 8px 10px; gap: 6px; }
  .tabs > a, .tabs summary { flex: 1 1 auto; justify-content: center; padding: 11px 12px; }
  .tabs details.tab-menu { flex: 1 1 100%; }
  .tab-tendina {
    position: static; box-shadow: none; margin-top: 6px;
    background: var(--verde-tenue);
  }
}

/* ==========================================================================
   LA BARRA IN BASSO — solo sul telefono
   Le funzioni principali sotto il pollice, come in un'app. Sotto i 700px
   prende il posto della barra in alto, che sparisce: sullo schermo piccolo
   lo spazio verticale è la cosa più preziosa che c'è.
   ========================================================================== */
.barra-basso { display: none; }

@media (max-width: 700px) {
  .tabs { display: none; }

  /* Su telefono il menu sta in cima, appiccicato sotto la barra verde:
     resta a portata di pollice quando si scorre e non copre l'ultima riga
     di contenuto, come faceva quando stava in fondo. */
  .barra-basso {
    display: flex; align-items: stretch;
    position: sticky; top: 0; z-index: 30;
    background: #fff; border-bottom: 1px solid var(--bordo);
    box-shadow: 0 6px 22px -10px rgba(12, 38, 20, .35);
    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-tenue);
    font-size: 11px; font-weight: 700; 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-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-chiaro);
    box-shadow: inset 0 0 0 1px rgba(0, 99, 42, .18);
  }

  .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: 800; 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: 700; 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; }
  .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: 12px; font-weight: 800; padding: 2px 7px; line-height: 1.35;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.tabs > a.attiva .pallino, .tabs details.tab-menu.attiva > summary .pallino {
  background: #fff; color: var(--rosso);
}

/* -------------------------------------------------------------- la pagina */
.contenuto { max-width: 1120px; margin: 26px auto 10px; padding: 0 16px; }

.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: 27px; line-height: 1.2; margin: 0 0 14px;
  color: var(--verde-scuro); letter-spacing: -.02em; font-weight: 800;
}
h2 { font-size: 20px; color: var(--verde-scuro); letter-spacing: -.01em; font-weight: 750; }

/* Un titolo che si vede: barretta verde a sinistra e icona nel tondino */
.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: 34px; height: 34px; flex: 0 0 auto;
  background: var(--verde-chiaro); border-radius: 10px;
  font-size: 17px; box-shadow: inset 0 0 0 1px rgba(0, 99, 42, .12);
}

/* 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: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--testo-tenue); font-weight: 700; margin: 0 0 3px;
}
.muted { color: var(--testo-tenue); }

/* -------------------------------------------------------------- i moduli */
label { display: block; font-weight: 650; margin: 14px 0 5px; color: var(--verde-scuro); }
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:not([type]), select, textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--bordo-forte); border-radius: var(--r-s);
  font-size: 16px; 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(0, 99, 42, .14);
}

/* ------------------------------------------------------------- i pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-s);
  font-size: 15.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none; text-align: center;
  border: 1px solid var(--verde-scuro);
  background: linear-gradient(180deg, var(--verde-vivo), var(--verde));
  color: #fff;
  box-shadow: var(--ombra-1), var(--ombra-dentro);
  transition: transform .1s ease, box-shadow .14s ease, filter .14s ease;
}
.btn:hover { filter: brightness(1.07); box-shadow: var(--ombra-2), var(--ombra-dentro); }
.btn:active { transform: translateY(1px); box-shadow: var(--ombra-1); }
.btn-verde { }
.btn-blu     { background: linear-gradient(180deg, #1668b8, var(--blu));     border-color: var(--blu-scuro); }
.btn-rosso   { background: linear-gradient(180deg, #d1483a, var(--rosso));   border-color: var(--rosso-scuro); }
.btn-arancio { background: linear-gradient(180deg, #ea8a10, var(--arancio)); border-color: var(--arancio-scuro); }
.btn-grey    { background: linear-gradient(180deg, #6f8779, #566b5e);        border-color: #3f4f45; }
.btn-viola   { background: linear-gradient(180deg, #7d59c9, var(--viola));   border-color: var(--viola-scuro); }
.btn-ghost {
  background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .45);
  color: #fff; box-shadow: none;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .28); }
.btn-verde-chiaro {
  background: var(--verde-chiaro); color: var(--verde-scuro);
  border-color: var(--bordo-forte); box-shadow: var(--ombra-1);
}
.btn-giallo { background: linear-gradient(180deg, #ffd97a, #f3c14a); color: #5c4600; border-color: #cfa130; }
.btn-small { padding: 6px 12px; font-size: 13.5px; 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 12px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}
.badge-si { background: #1e8a3c; }
.badge-no { background: #8b9a8f; }

/* -------------------------------------------------------------- le tabelle */
table.elenco { width: 100%; border-collapse: collapse; }
table.elenco th, table.elenco td {
  text-align: left; padding: 11px 10px;
  border-bottom: 1px solid var(--bordo); vertical-align: top;
}
table.elenco th {
  background: var(--verde-tenue); color: var(--verde-scuro);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 750;
  border-bottom: 2px 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: linear-gradient(180deg, #fff, var(--verde-chiaro));
  border: 1px solid var(--verde); border-left: 5px solid var(--verde);
  color: var(--verde-scuro); border-radius: var(--r-s);
  padding: 13px 18px; margin-bottom: 16px; font-weight: 650;
  box-shadow: var(--ombra-1);
}
.errore {
  background: #fdeeec; border: 1px solid var(--rosso); border-left: 5px solid var(--rosso);
  color: var(--rosso-scuro); border-radius: var(--r-s);
  padding: 13px 18px; margin-bottom: 16px; font-weight: 650;
  box-shadow: var(--ombra-1);
}
.nota-box {
  background: #fffbeb; border: 1px solid #e8c766; 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: 13px; 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: #fdeeec; 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: #fff5e6; border: 1px solid #e8b062; border-left: 5px solid var(--arancio);
  border-radius: var(--r-s); padding: 12px 16px; margin-top: 16px;
  color: #7a4a05; font-size: 14.5px;
}

.notifica-preventivi {
  background: linear-gradient(180deg, #f6efff, #efe4ff);
  border-bottom: 3px solid var(--viola); color: var(--viola-scuro);
  padding: 13px 20px; font-size: 15px; position: relative; z-index: 30;
}
.notifica-preventivi a { color: var(--viola-scuro); font-weight: 700; }

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

/* --------------------------------------------------------------- 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-box { max-width: 430px; margin: 56px auto; box-shadow: var(--ombra-2); }
.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: 14.5px;
}
.login-aiuto a { font-weight: 650; }

/* 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; box-shadow: var(--ombra-1);
  overflow: hidden;
}
details.accordeon summary {
  cursor: pointer; padding: 14px 18px; font-weight: 700;
  color: var(--verde-scuro); font-size: 17px;
}
details.accordeon summary:hover { background: var(--verde-tenue); }
details.accordeon > div { padding: 0 18px 16px; }

.gps-ok { color: #1e8a3c; font-weight: 700; }
.gps-no { color: var(--rosso); font-weight: 700; }
.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: 700; font-size: 15px;
  box-shadow: var(--ombra-1);
  transition: transform .1s ease, box-shadow .14s ease;
}
.seg a:hover, .seg button:hover { box-shadow: var(--ombra-2); transform: translateY(-1px); }
.seg a small, .seg button small {
  display: block; margin-top: 4px; font-weight: 500; font-size: 12px; opacity: .75;
}
.seg a.attivo, .seg button.attivo {
  background: linear-gradient(180deg, var(--verde-vivo), var(--verde));
  color: #fff; border-color: var(--verde-scuro);
  box-shadow: var(--ombra-2), var(--ombra-dentro); 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: linear-gradient(135deg, #ffffff 0%, var(--verde-tenue) 100%);
  border: 1px solid var(--bordo); border-radius: var(--r-xl);
  padding: 22px 26px; margin-bottom: 18px;
  box-shadow: var(--ombra-1);
}
.hero-marchio img { max-height: 92px; max-width: 320px; display: block; }
.hero-marchio .ht-emblema { font-size: 52px; line-height: 1; }
.hero-saluto h1 { margin: 0 0 3px; font-size: 26px; }
.hero-ruolo { margin: 0; color: var(--testo-tenue); font-size: 14.5px; font-weight: 600; }
.hero-meteo { display: flex; justify-content: flex-end; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 14px; }
  .hero-meteo { justify-content: center; }
}

/* riquadro data + meteo */
.data-meteo {
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--r);
  padding: 13px 18px; min-width: 236px; text-align: right;
  box-shadow: var(--ombra-1);
}
.dm-data { font-weight: 750; color: var(--verde-scuro); font-size: 15px; }
.dm-meteo { display: flex; gap: 9px; align-items: center; justify-content: flex-end; margin-top: 6px; font-size: 16px; }
.dm-icona { font-size: 28px; }
.dm-testo b { font-size: 22px; color: var(--verde-scuro); }
.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: 15px 18px; font-size: 16px; border-radius: var(--r);
  box-shadow: var(--ombra-2), var(--ombra-dentro);
}
.btn-azione small { display: block; font-weight: 500; 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": il numero grande porta dove serve */
.tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 13px; }
.tessere-mini { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.tessera {
  display: grid; grid-template-areas: "icona numero" "etichetta etichetta" "nota nota";
  grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px;
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--r);
  border-left: 5px solid var(--bordo-forte);
  padding: 14px 16px; text-decoration: none; color: var(--testo);
  box-shadow: var(--ombra-1);
  transition: transform .11s ease, box-shadow .14s ease;
}
a.tessera:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
.tz-icona { grid-area: icona; font-size: 21px; line-height: 1; }
.tz-numero {
  grid-area: numero; text-align: right; font-size: 34px; font-weight: 800;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.tz-etichetta { grid-area: etichetta; font-size: 13.5px; font-weight: 650; color: var(--testo-tenue); margin-top: 7px; }
.tz-nota { grid-area: nota; font-size: 12px; color: var(--arancio-scuro); font-weight: 650; margin-top: 3px; }
.tessera-verde   { border-left-color: var(--verde); }   .tessera-verde   .tz-numero { color: var(--verde); }
.tessera-blu     { border-left-color: var(--blu); }     .tessera-blu     .tz-numero { color: var(--blu); }
.tessera-arancio { border-left-color: var(--arancio); } .tessera-arancio .tz-numero { color: var(--arancio-scuro); }
.tessera-rosso   { border-left-color: var(--rosso); }   .tessera-rosso   .tz-numero { color: var(--rosso); }
.tessera-viola   { border-left-color: var(--viola); }   .tessera-viola   .tz-numero { color: var(--viola); }
.tessera-vuota { opacity: .55; border-left-color: var(--bordo-forte); }
.tessera-vuota .tz-numero { color: var(--testo-tenue) !important; }

/* i tre tasti grandi dell'operaio: si prendono col pollice */
.card-oggi { border: 1px solid var(--verde); 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: 1px solid rgba(0, 0, 0, .18);
  box-shadow: var(--ombra-2), var(--ombra-dentro);
  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: 18px; font-weight: 800; letter-spacing: -.01em; }
.tg-nota { font-size: 12.5px; opacity: .9; font-weight: 600; }
.tg-verde   { background: linear-gradient(160deg, var(--verde-vivo), var(--verde-scuro)); }
.tg-blu     { background: linear-gradient(160deg, #2079cd, var(--blu-scuro)); }
.tg-arancio { background: linear-gradient(160deg, #ef9418, 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: 700; font-size: 15px; }
.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: linear-gradient(180deg, #fff, var(--verde-tenue));
  box-shadow: var(--ombra-1);
}
.co-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.co-titolo { font-weight: 750; text-decoration: none; color: var(--verde-scuro); font-size: 15.5px; }
.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: 650; 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: #dde7df;
}
.avanzamento i.on, .sop-avanzamento i.on {
  background: linear-gradient(90deg, var(--verde-vivo), var(--verde));
}

/* 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: 650; font-size: 14px;
}
.linguette a:hover { border-color: var(--verde); color: var(--verde-scuro); }
.linguette a.attiva {
  background: var(--verde); border-color: var(--verde-scuro); color: #fff;
  box-shadow: var(--ombra-1);
}
.lg-n {
  background: var(--verde-chiaro); color: var(--verde-scuro);
  border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 800;
}
.linguette a.attiva .lg-n { background: rgba(255, 255, 255, .25); color: #fff; }

/* --------------------------------------------------------- banner delle news */
.news-banner {
  background: linear-gradient(160deg, #ffffff, var(--verde-chiaro));
  border: 1px solid var(--verde); border-radius: var(--r-xl);
  padding: 22px 26px; margin-bottom: 18px; text-align: center;
  box-shadow: var(--ombra-2);
}
.nb-etichetta {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 800; color: var(--verde);
}
.news-banner h2 { font-size: 23px; margin: 7px 0 11px; color: var(--verde-scuro); }
.nb-testo { font-size: 16px; 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: 500; }
.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: linear-gradient(180deg, #fff, var(--verde-tenue));
  border: 1px solid var(--bordo); border-radius: var(--r);
  padding: 13px 9px; text-align: center; box-shadow: var(--ombra-1);
}
.pg-data { font-weight: 750; 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: 700; }
.sop-titolo { font-weight: 750; font-size: 16px; }
.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: 800; background: #fff; color: #9aa89e; border: 1px solid var(--bordo-forte);
}
.timeline .dot.on {
  background: linear-gradient(180deg, var(--verde-vivo), var(--verde));
  color: #fff; border-color: var(--verde-scuro); box-shadow: var(--ombra-1);
}
.tl-label { font-weight: 750; font-size: 15px; }
.tl-date { font-size: 13px; color: var(--testo-tenue); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 15px; margin: 0 0 17px; }
.kv dt { color: var(--testo-tenue); font-size: 13.5px; }
.kv dd { margin: 0; }

/* ------------------------------------------------------------ stima dei costi */
.stima-tab { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.stima-tab th {
  text-align: left; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--testo-tenue); background: var(--verde-tenue); padding: 9px;
  border-bottom: 2px solid var(--bordo-forte);
}
.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: 15px; }
.stima-totali {
  background: linear-gradient(180deg, #fff, var(--verde-tenue));
  border: 1px solid var(--bordo); border-radius: var(--r);
  padding: 14px 18px; margin-top: 14px; max-width: 430px; margin-left: auto;
  box-shadow: var(--ombra-1);
}
.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: 19px; font-weight: 800; color: var(--verde-scuro);
}
.riga-tot .inline { display: flex; align-items: center; gap: 6px; font-weight: 600; margin: 0; }
.riga-tot .inline input { width: 74px; padding: 5px 7px; }
.stima-mini th, .stima-mini td { font-size: 14px; padding: 6px; }

.box-chiusura { border: 1px solid var(--verde); 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: #fdeeec; }
.riga-cantiere td { border-top: 1px solid #f3c9c4; }
.riga-cantiere strong { color: var(--rosso-scuro); }
.riga-riparazione { background: #fff6e8; }
.riga-riparazione td { border-top: 1px solid #f0d3a3; }
.riga-riparazione strong { color: var(--arancio-scuro); }
.riga-fuori { background: #fdeeec; }          /* 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: 15px; cursor: pointer; font-weight: 600;
  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: 500; font-size: 14px; color: var(--testo-tenue);
}
.spunta-inline input { width: auto; 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 var(--verde); 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: 15px; font-weight: 650;
  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: var(--verde); color: var(--verde-scuro);
}
.stato-turno.dentro .st-pallino {
  background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .18);
}

/* 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: 500;
}
.spunta-geo:hover { border-color: var(--verde); }
.spunta-geo input { margin-top: 2px; }
.spunta-geo strong { display: block; font-size: 15.5px; 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: 1px solid rgba(0, 0, 0, .18);
  font-family: inherit; color: #fff; cursor: pointer;
  box-shadow: var(--ombra-2), var(--ombra-dentro);
  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-color: var(--bordo);
  box-shadow: none; cursor: not-allowed;
}
.tt-icona { font-size: 34px; line-height: 1; }
.tt-testo { font-size: 18px; font-weight: 800; letter-spacing: .01em; }
.tt-nota { font-size: 12.5px; opacity: .9; font-weight: 600; }
.tt-ingresso { background: linear-gradient(160deg, var(--verde-vivo), var(--verde-scuro)); }
.tt-uscita   { background: linear-gradient(160deg, #d1483a, var(--rosso-scuro)); }

.geo-stato {
  margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-s);
  font-size: 14.5px; font-weight: 650;
}
.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: #fff5e6; 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: 30px; font-weight: 800; 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: 650; 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: #16a34a; background: linear-gradient(180deg, #fff, var(--verde-chiaro)); }
.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: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.sr-stato strong { display: block; font-size: 16px; 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: var(--rosso); background: linear-gradient(180deg, #fff, #fdeeec); }

/* ==========================================================================
   STATISTICHE
   ========================================================================== */
.stat-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 13px; }
.stat {
  background: linear-gradient(180deg, #fff, var(--verde-tenue));
  border: 1px solid var(--bordo); border-radius: var(--r);
  padding: 16px 18px; box-shadow: var(--ombra-1);
}
.st-numero {
  font-size: 30px; font-weight: 800; color: var(--verde-scuro);
  line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.st-numero small { font-size: 15px; font-weight: 700; color: var(--testo-tenue); }
.st-etichetta { font-size: 13px; color: var(--testo-tenue); font-weight: 650; margin-top: 5px; }
.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: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-solco { display: block; background: #e3ebe5; border-radius: 999px; height: 15px; overflow: hidden; }
.ba-riemp {
  display: block; /* è uno <span>: senza questo l'altezza non si applica */
  height: 100%; border-radius: 999px; min-width: 3px;
  background: linear-gradient(90deg, var(--verde-vivo), var(--verde));
}
.ba-riemp.blu     { background: linear-gradient(90deg, #2f86dd, var(--blu)); }
.ba-riemp.arancio { background: linear-gradient(90deg, #f0a02c, var(--arancio)); }
.ba-riemp.viola   { background: linear-gradient(90deg, #8b6ad3, var(--viola)); }
.ba-riemp.rosso   { background: linear-gradient(90deg, #d9584a, var(--rosso)); }
.ba-valore { font-size: 13.5px; font-weight: 750; 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: 2px 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: 750; 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));
  box-shadow: var(--ombra-1);
}
.co-asta.spenta { background: #dde7df; }
.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: 650;
}

/* 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; box-shadow: var(--ombra-1);
}
.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: 800; 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);
  border-left: 5px solid var(--verde-vivo);
  padding: 14px 16px; box-shadow: var(--ombra-1);
}
.cu-icona { font-size: 24px; line-height: 1.1; }
.cu-titolo { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--testo-tenue); font-weight: 750; }
.cu-valore { font-weight: 750; font-size: 16px; color: var(--verde-scuro); margin-top: 2px; }
.cu-nota { font-size: 13px; color: var(--testo-tenue); margin-top: 2px; }

/* -------------------------------------------------------------- il telefono */
@media (max-width: 640px) {
  .contenuto { margin-top: 18px; padding: 0 12px; }
  .card { padding: 17px 16px; border-radius: var(--r); }
  h1 { font-size: 23px; }
  .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; }
  .ub-chi { display: none; }
}

@media print {
  .topbar, .tabs, .fondo, .row-btn, .filtri, .notifica-preventivi { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* ==========================================================================
   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: 800;
           letter-spacing: .04em; color: #23272a; }
.pg-riga { display: block; width: 24px; height: 3px; border-radius: 2px;
           background: currentColor; opacity: .5; margin: 7px auto 10px; }
.pg.spento .pg-disco, .pg.spento .pg-svg, .pg.spento .pg-nome { filter: grayscale(1); opacity: .5; }

/* --------------------------------- 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: #16a34a; background: linear-gradient(180deg, #fff, var(--verde-chiaro)); }
.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: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.sg-stato strong { display: block; font-size: 16px; 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: 700; 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: 750; background: var(--verde-tenue); }

/* il tasto grande "CHIUDI LAVORO" */
.btn.btn-grande {
  display: inline-flex; justify-content: center; width: 100%;
  font-size: 17px; letter-spacing: .05em; 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: 750; }
.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: 18px; }
.sc:hover .sc-nome { text-decoration: underline; }

/* ============================================================== CALENDARIO */
.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: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--testo-tenue);
}
.cal-cella {
  min-height: 70px; padding: 6px 7px; background: #fff;
  border: 1px solid var(--bordo); 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: 750; font-size: 14px; color: var(--verde-scuro); }
.cal-ore     { font-size: 12px; font-weight: 750; color: var(--verde); }
.cal-lavori  { font-size: 11px; color: var(--testo-tenue); }

/* -------------------------------------------------------------- il telefono */
@media (max-width: 640px) {
  .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; }
}

@media print {
  .pulsantiera, .scorciatoie { display: none !important; }
}

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

/* L'icona della casa nella barra verde: si clicca e si torna in home.
   È un'immagine chiara, quindi niente tondino bianco: bastano gli angoli. */
.topbar .marchio-mini.ico-casa {
  height: 42px; width: 42px; border-radius: 11px;
  padding: 2px; object-fit: contain; background: #fff;
}

/* 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: linear-gradient(135deg, #ffffff 0%, var(--verde-tenue) 100%);
  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: rgba(255, 255, 255, .75);
}
.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; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.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; transition: transform .12s ease, box-shadow .12s ease;
}
.tessere-icone a:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
.tessere-icone img { width: 100%; height: auto; display: block; }
.tessere-icone .ti-pallino {
  position: absolute; top: 10px; right: 10px;
  background: #cc2b2b; color: #fff; font-weight: 750; font-size: 13px;
  min-width: 24px; height: 24px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; padding: 0 6px;
}
@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: 700; 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: collapse; margin-top: 10px; table-layout: fixed; }
.calendario-mese th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--testo-tenue); padding: 6px 0; font-weight: 700;
}
.calendario-mese td {
  height: 62px; width: 14.28%; vertical-align: top; border: 1px solid var(--bordo);
  padding: 4px 5px; font-size: 13px;
}
.calendario-mese td.vuota { background: #fafbfa; border-color: #f0f2f0; }
.calendario-mese td.lavorata { background: var(--verde-tenue); }
.calendario-mese td.oggi { outline: 2px solid var(--verde-scuro); outline-offset: -2px; }
.cm-giorno { font-weight: 750; 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: 700; }
.cm-voce.appuntamento { color: #7a5cc4; font-weight: 700; }

/* ==========================================================================
   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: 700;
                   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: 17px; 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); background: #fff; color: var(--verde-scuro);
  font-size: 13.5px; font-weight: 650; text-decoration: none;
}
.chip:hover { background: var(--verde-tenue); }
.chip.attivo { background: var(--verde); border-color: var(--verde); color: #fff; }
.filtri-chip { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }

label.stretto { max-width: 220px; }
.apri-form { cursor: pointer; font-size: 16px; 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: 700; font-variant-numeric: tabular-nums; }
.tab-righe td.num, .tab-righe th.num { text-align: right; }
.tab-righe tfoot th { background: var(--verde-tenue); }
.tab-righe .riga-totale th { font-size: 17px; 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: 700;
}

.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: 700;
                   text-transform: uppercase; letter-spacing: .04em; }
.riga-dati strong.grosso { font-size: 21px; color: var(--verde-scuro); }

.scelta-origine { border: 1px solid var(--bordo); border-radius: var(--r-s); padding: 10px 14px; }
.scelta-origine legend { font-weight: 700; padding: 0 6px; font-size: 13px; }
.radio-riga { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; font-weight: 500; }
.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: 700; 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: 15px; 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: #1a7a34; }
.ro-no { border-left-color: #c0392b; }
.ro-che { font-size: 12px; font-weight: 700; text-transform: uppercase;
          letter-spacing: .04em; color: var(--testo-tenue); }
.ro-nome { font-size: 16.5px; 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: #1668b8; background: #f4f9ff; }
.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: #c0392b; font-weight: 700; }
.ro-attesa { border-left-color: #e07b00; }

/* ==========================================================================
   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: 700; text-transform: uppercase; letter-spacing: .04em; }
.an-titolo { font-size: 15.5px; 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: 10px; }
.ms-tasto {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px; padding: 5px 11px 5px 6px; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.ms-tasto:hover { background: rgba(255,255,255,.24); }
.ms-pista {
  flex: 0 0 auto; width: 34px; height: 19px; border-radius: 999px;
  background: rgba(0,0,0,.28); 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;
}
.master-switch.on .ms-pista { background: #e07b00; }
.master-switch.on .ms-pallina { left: 17px; }
.ms-testo { font-size: 12.5px; font-weight: 700; line-height: 1.1; }
.ms-testo small { display: block; font-weight: 500; opacity: .82; font-size: 11px; }
.ms-vai { display: block; margin-top: 5px; font-size: 11.5px; text-align: center; }

.fascia-master {
  background: #e07b00; color: #fff; font-size: 13.5px; font-weight: 650;
  padding: 7px 16px; text-align: center;
}
.fascia-master a { color: #fff; text-decoration: underline; }

.master-testa.acceso { border-left: 5px solid #e07b00; }
.master-avviso {
  background: #fff6e9; 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: #c0392b; text-decoration: line-through; }
.md-dopo  { color: #1a7a34; font-weight: 700; }
.master-matita { border-color: #e07b00 !important;
  background: linear-gradient(180deg, #f0a02c, 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; }