/* ============================================================
   WOLF — un solo foglio di stile, senza librerie.
   Colori e caratteri del Figma della piattaforma (come il mock),
   impaginato del back office del mock, form a righe (prova A, 07/10).
   ============================================================ */

/* ---------- Colori e misure ---------- */
:root {
  --primario-700: #001F57;
  --primario-600: #002A75;
  --primario-500: #003594;
  --primario-400: #004FDB;
  --secondario-500: #149EDE;
  --secondario-400: #3BB5ED;
  --grigio-100: #F8F5F5;
  --grigio-200: #F1EFEF;
  --grigio-500: #E3E3E3;
  --grigio-800: #787878;
  --grigio-900: #424242;
  --bianco: #FAF9F6;
  --testo: #0C0C0C;
  --azzurro-chiaro: #CCE0F5;
  --avviso: #EAB308;
  --errore: #DD0F16;
  --successo: #69A829;
  --raggio: 10px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  color: var(--testo);
  background: var(--grigio-200);
}
a { color: var(--secondario-500); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Avvisi (errore, esito, attenzione) ---------- */
.avviso {
  position: relative;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px 10px 16px;
  border-radius: 8px;
  background: var(--grigio-200);
  font-size: 13px; line-height: 1.5;
  overflow: hidden;
}
.avviso::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--secondario-500); }
.avviso i { margin-top: 2px; color: var(--secondario-500); }
.avviso.errore { background: #FDF2F2; }
.avviso.errore::before { background: var(--errore); }
.avviso.errore i { color: var(--errore); }
.avviso.attenzione { background: #FFFBEB; }
.avviso.attenzione::before { background: var(--avviso); }
.avviso.attenzione i { color: var(--avviso); }

/* ============================================================
   ACCESSO (login, recupero password, scelta della password)
   ============================================================ */
.accesso {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 100%, var(--secondario-400) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 0%, var(--primario-700) 0%, transparent 50%),
    linear-gradient(135deg, var(--primario-700) 0%, var(--primario-500) 40%, var(--primario-400) 75%, var(--secondario-500) 100%);
}
.accesso-deco { position: absolute; pointer-events: none; fill: #fff; }
.accesso-deco-1 { top: -80px; left: -80px; width: 400px; height: 400px; opacity: .18; }
.accesso-deco-2 { bottom: -100px; right: -80px; width: 450px; height: 450px; opacity: .16; transform: rotate(180deg); }

.accesso-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 467px;
  background: var(--bianco);
  border: 1px solid var(--grigio-500);
  border-radius: 16px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.accesso-card form { display: flex; flex-direction: column; gap: 12px; }
.accesso-logo { text-align: center; margin-bottom: 8px; }
.accesso-logo img { height: 43px; width: auto; }

.accesso-campo label { display: block; font-size: 12px; margin-bottom: 6px; }
.accesso-campo input {
  width: 100%; height: 36px;
  padding: 0 14px;
  border: 1px solid var(--grigio-500); border-radius: 8px;
  background: var(--bianco);
  font-size: 13px;
}
.accesso-campo input:focus {
  outline: none;
  border-color: var(--primario-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 53, 148, .10);
}
.accesso-password { position: relative; }
.accesso-password input { padding-right: 40px; }
.mostra-password {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  color: var(--grigio-800); font-size: 16px;
}
.mostra-password:hover { color: var(--primario-500); }

.accesso-entra {
  height: 36px; margin-top: 4px;
  border: 0; border-radius: 8px;
  background: var(--secondario-500); color: var(--bianco);
  font-size: 13px; cursor: pointer;
}
.accesso-entra:hover { background: #1089C5; }
.accesso-link { text-align: center; font-size: 12.8px; }
.accesso-link a { color: var(--testo); text-decoration: underline; text-underline-offset: 2px; }
.accesso-link a:hover { color: var(--primario-500); }

/* ============================================================
   AREA INTERNA (impaginato del back office del mock)
   ============================================================ */
.bo-cornice { display: flex; min-height: 100vh; }

/* ---------- Menu laterale ad albero ---------- */
.bo-menu {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: 260px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px;
  background: linear-gradient(180deg, var(--primario-700) 0%, var(--primario-500) 100%);
}
.bo-marchio {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px; padding: 10px 12px;
  border-radius: var(--raggio);
  background: var(--bianco);
}
.bo-marchio:hover { text-decoration: none; }
.bo-marchio img { height: 26px; width: auto; align-self: flex-start; }

/* Voce: ramo (summary) o foglia (a). --liv = profondità, 0 in cima. */
.bo-voce {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px 8px calc(10px + var(--liv, 0) * 18px);
  border: 0; border-radius: 8px;
  background: none;
  color: #fff; font-size: 14px; text-align: left;
  cursor: pointer;
}
.bo-voce:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.bo-voce::-webkit-details-marker { display: none; }
.bo-voce i { width: 18px; text-align: center; opacity: .9; flex-shrink: 0; }
.bo-voce.attiva { background: linear-gradient(135deg, var(--primario-500) 0%, var(--secondario-500) 100%); font-weight: 600; }
.bo-ramo > summary .bo-freccia { margin-left: auto; font-size: 11px; transition: transform .2s; }
.bo-ramo[open] > summary .bo-freccia { transform: rotate(180deg); }
.bo-esci { margin-top: auto; }

/* ---------- Intestazione e contenuto ---------- */
.bo-principale { flex: 1; min-width: 0; margin-left: 260px; display: flex; flex-direction: column; }
.bo-testata {
  position: sticky; top: 0; z-index: 5;
  height: 56px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  background: var(--bianco);
  border-bottom: 1px solid var(--grigio-500);
}
.bo-titolo { font-size: 18px; font-weight: 700; color: var(--primario-500); }
.bo-utente { margin-left: auto; font-size: 13px; color: var(--grigio-900); }
.bo-contenuto { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Pulsanti ---------- */
.pulsante {
  height: 32px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--primario-500); border-radius: 6px;
  background: var(--primario-500); color: #fff;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.pulsante:hover { background: var(--primario-400); text-decoration: none; }
.pulsante.contorno { background: #fff; color: var(--primario-500); }
.pulsante.contorno:hover { background: var(--azzurro-chiaro); }

/* ---------- Riquadro con tabella ---------- */
.riquadro { background: var(--bianco); border: 1px solid var(--grigio-500); border-radius: var(--raggio); overflow: hidden; }
.riquadro-testa { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--grigio-500); }
.riquadro-testa .conteggio { margin-left: auto; font-size: 12px; color: var(--grigio-800); }
.scorrimento { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabella th {
  padding: 8px 12px;
  background: var(--grigio-100);
  border-bottom: 1px solid var(--grigio-500);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--grigio-800); text-align: left; white-space: nowrap;
}
.tabella td { padding: 7px 12px; border-bottom: 1px solid var(--grigio-200); white-space: nowrap; }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabella tbody tr:hover td { background: var(--azzurro-chiaro); }

/* ---------- Form a righe: nome a sinistra, casella a destra (Fabio, 07/10) ---------- */
.righe { max-width: 640px; border-top: 1px solid #D0D0D0; }
.riga { display: grid; grid-template-columns: 240px 1fr; align-items: center; border-bottom: 1px solid #D0D0D0; }
.riga label { padding: 7px 12px 7px 0; font-size: 14px; font-weight: 600; }
.riga input, .riga select {
  width: 100%; max-width: 360px; height: 32px; margin: 5px 0; padding: 0 8px;
  border: 1px solid #8A8A8A; border-radius: 3px;
  background: #fff; font-size: 14px;
}
.riga input:focus, .riga select:focus { outline: 2px solid var(--secondario-500); outline-offset: 0; }
.riga.sbagliata label { color: var(--errore); }
.riga.sbagliata input, .riga.sbagliata select { border: 2px solid var(--errore); background: #FFF5F5; }

/* Riquadri per gruppo, quando i campi sono tanti (variante B, 07/10) */
.gruppo { min-width: 0; margin: 0 0 16px; padding: 2px 16px 6px; border: 1px solid #BDBDBD; border-radius: 6px; }
.gruppo legend { padding: 0 6px; font-size: 14px; font-weight: 700; color: var(--primario-500); }
.gruppo .riga { grid-template-columns: 200px 1fr; }
.gruppo .riga:last-child { border-bottom: 0; }

.pulsanti { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.pulsanti .destra { margin-left: auto; display: flex; gap: 12px; }

/* ---------- Filtri sopra le tabelle ---------- */
.filtri {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 12px 16px;
  background: var(--bianco); border: 1px solid var(--grigio-500); border-radius: var(--raggio);
}
.filtri .destra { margin-left: auto; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 11px; font-weight: 600; color: var(--grigio-800); }
.campo input, .campo select {
  height: 32px; min-width: 220px; padding: 0 8px;
  border: 1px solid var(--grigio-500); border-radius: 6px; background: #fff; font-size: 13px;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--primario-500); }
.spunta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; min-height: 32px; }

.tabella tr.spento td { color: var(--grigio-800); }
.tabella td.vuoto { color: var(--grigio-800); text-align: center; padding: 16px; }
.etichetta { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.etichetta.ok { background: #E6F2DA; color: #3F6B14; }
.etichetta.attesa { background: #E6F0FB; color: var(--primario-500); }
.etichetta.spenta { background: var(--grigio-200); color: var(--grigio-900); }

/* ---------- Scheda: gruppi affiancati, ruoli, griglia dei permessi ---------- */
.colonne { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 24px; }
.colonne > .gruppo { flex: 1 1 420px; }
.gruppo { background: var(--bianco); }
.gruppo.sbagliata { border: 2px solid var(--errore); }
.riga .valore { padding: 7px 0; font-size: 14px; }
.ruoli { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }

.griglia-permessi { border-collapse: collapse; width: 100%; margin: 6px 0; }
.griglia-permessi th { width: 200px; padding: 7px 12px 7px 0; text-align: left; font-size: 14px; font-weight: 600; vertical-align: top; }
.griglia-permessi td { padding: 4px 0; }
.griglia-permessi tr + tr { border-top: 1px solid #D0D0D0; }
.permesso { display: inline-flex; align-items: center; gap: 6px; margin: 3px 18px 3px 0; padding: 2px 8px; border-radius: 4px; font-size: 13px; cursor: pointer; }
.permesso input { accent-color: var(--secondario-500); }
.permesso:has(input:checked:not(:disabled)), .legenda .in-piu { background: #E6F0FB; color: var(--primario-500); font-weight: 600; }
.permesso.bloccato { color: var(--grigio-800); cursor: default; }
.permesso.da-ruolo { background: var(--grigio-200); color: var(--grigio-900); cursor: default; }
.permesso.da-ruolo input { accent-color: var(--grigio-800); }
.legenda { display: flex; gap: 8px; margin: 8px 0 4px; }
.legenda .permesso { cursor: default; }
.legenda .da-ruolo i { color: var(--grigio-800); }
.legenda .in-piu i { color: var(--secondario-500); }

.link-invito { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.link-invito input { flex: 1 1 420px; height: 32px; padding: 0 8px; border: 1px solid var(--grigio-500); border-radius: 6px; font-size: 12px; background: #fff; }
.pulsanti form { display: contents; }
.pulsante.pericolo { color: var(--errore); border-color: var(--errore); }
.pulsante.pericolo:hover { background: #FDF2F2; }

/* ---------- Log ---------- */
.tabella.log td { vertical-align: top; }
.tabella.log td.modifiche { white-space: normal; min-width: 320px; }
.modifiche > div { padding: 1px 0; }
.campo-log { display: inline-block; min-width: 90px; color: var(--grigio-800); font-size: 12px; }
.modifiche .prima { color: var(--errore); text-decoration: line-through; margin-right: 6px; }
.modifiche .dopo { color: #3F6B14; }
.tenue { color: var(--grigio-800); }
.pagine { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--grigio-500); font-size: 13px; color: var(--grigio-800); }

/* ---------- Mail ---------- */
.etichetta.ko { background: #FDF2F2; color: var(--errore); }
.testo-mail { padding: 8px 0 12px; line-height: 1.5; }
.testo-mail table, .testo-mail td, .testo-mail th { border: 1px solid #999; border-collapse: collapse; padding: 4px 6px; }
.riga input.largo { max-width: 100%; }
.segnaposto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0; font-size: 13px; }
.pulsante.piccolo { height: 26px; padding: 0 8px; font-size: 12px; font-weight: 500; }
.gruppo .jodit-container { margin-bottom: 10px; }

/* ============================================================
   PAGINE DEL PdV IN IFRAME (templates/pdv/): stile del frontend del mock, senza menu
   ============================================================ */
body.pdv { background: #fff; }
.pdv-pagina { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.pdv-testata { display: flex; align-items: center; gap: 16px; }
.pdv-titolo { font-size: 24px; font-weight: 700; color: var(--primario-500); }
.pdv-logo { height: 22px; width: auto; }
.indietro { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--primario-500); }
.indietro:hover { background: var(--azzurro-chiaro); text-decoration: none; }
.pdv-sottotitolo { font-size: 16px; font-weight: 700; color: var(--primario-500); margin: 8px 0 8px; }
.pdv-elenco { font-size: 14px; line-height: 1.7; padding-left: 20px; }
.pdv-nota { font-size: 12px; color: var(--grigio-800); margin: 6px 0 10px; }
.pdv-colonne { gap: 0 56px; }
.pdv-colonne > div:first-child { flex: 1 1 520px; max-width: 640px; }
.avviso.successo { background: #F1FBF4; max-width: 640px; }
.avviso.successo::before { background: var(--successo); }
.avviso.successo i { color: var(--successo); }
.avviso.esito, .avviso.informazione { max-width: 640px; }
.avviso.esito ul { margin: 2px 0 0; padding-left: 18px; }
.esito-gruppo { margin-top: 6px; }

/* ---------- Card dei servizi: fascia colorata con lo stato ---------- */
.servizi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 240px)); gap: 18px; }
.servizio {
  --c: #D1D5DB; --sfondo: #F9FAFB; --scritta: #6B7280;
  display: flex; flex-direction: column;
  background: #fff; border: 2px solid var(--c); border-radius: 12px; overflow: hidden;
  color: var(--testo); transition: box-shadow .15s, transform .15s;
}
a.servizio:hover { box-shadow: 0 6px 20px rgba(0, 53, 148, .14); transform: translateY(-2px); text-decoration: none; }
.servizio-logo { height: 110px; display: flex; align-items: center; justify-content: center; padding: 18px 22px 8px; }
.servizio-logo img { max-width: 100%; max-height: 34px; object-fit: contain; }
.servizio-logo img.alto { max-height: 72px; }
.servizio-nome { flex: 1; text-align: center; font-size: 13px; color: var(--grigio-800); padding: 0 12px 12px; }
.servizio-stato { background: var(--sfondo); color: var(--scritta); border-top: 1px solid var(--c); padding: 8px; text-align: center; font-size: 13px; font-weight: 700; }
.servizio.attivabile { --c: #3B82F6; --sfondo: #E6F0FB; --scritta: var(--primario-500); }
.servizio.lavorazione { --c: #F0A92E; --sfondo: #FEF3C7; --scritta: #92600A; }
.servizio.attivato { --c: #22A559; --sfondo: #DCFCE7; --scritta: #166534; }
.servizio.nonattivato { --c: #E05252; --sfondo: #FDE2E2; --scritta: #9B1C1C; }
.servizio.cessato { --c: #9CA3AF; --sfondo: #F3F4F6; --scritta: #4B5563; }

/* ---------- Dati in sola lettura nel form a righe ---------- */
.riga .nome { padding: 7px 12px 7px 0; font-size: 14px; font-weight: 600; }
.riga .valore { padding: 7px 0; font-size: 14px; }
.riga.sbagliata .nome, .riga.sbagliata .valore { color: var(--errore); }
.riga .motivo { display: block; font-size: 12px; font-weight: 600; }

/* ---------- Orari di apertura ---------- */
.orari { border-collapse: collapse; font-size: 14px; }
.orari th { font-size: 13px; font-weight: 600; padding: 4px 6px; text-align: center; border-bottom: 1px solid #D0D0D0; }
.orari td { padding: 3px 6px; border-bottom: 1px solid #E8E8E8; }
.orari td:first-child { font-weight: 600; min-width: 110px; padding-left: 0; }
.orari .sep { width: 14px; padding: 0; }
.orari input { width: 72px; height: 30px; text-align: center; border: 1px solid #8A8A8A; border-radius: 3px; background: #fff; text-transform: uppercase; }
.orari input:focus { outline: 2px solid var(--secondario-500); outline-offset: 0; }
.orari input:disabled { background: var(--grigio-100); color: var(--grigio-900); }
.orari input.sbagliato { border: 2px solid var(--errore); background: #FFF5F5; }
.orari td.dopo { font-size: 12px; color: var(--grigio-800); white-space: nowrap; min-width: 80px; }
.copia-orari { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0; }

/* ---------- Loader delle attese (templates/base/attesa.php) ----------
   Provvisorio: si sostituisce con il loader definitivo, qui e nel template. */
.attesa {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(250, 249, 246, .75);
}
.attesa[hidden] { display: none; }
.attesa-figura {
  width: 40px; height: 40px;
  border: 4px solid var(--azzurro-chiaro); border-top-color: var(--primario-500); border-radius: 50%;
  animation: attesa-giro .8s linear infinite;
}
.attesa-testo { font-size: 13px; font-weight: 600; color: var(--primario-500); }
@keyframes attesa-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .attesa-figura { animation-duration: 2.4s; } }

/* ---------- Schermi stretti ---------- */
@media (max-width: 900px) {
  .bo-cornice { flex-direction: column; }
  .bo-menu { position: static; width: 100%; }
  .bo-principale { margin-left: 0; }
  .bo-contenuto { padding: 16px; }
}
@media (max-width: 600px) {
  .riga, .gruppo .riga { grid-template-columns: 1fr; }
  .riga label { padding: 8px 0 0; }
}

/* Area partner: pillole degli stati, colori degli stati (pagina Stati), azioni di VivaTicket */
.vt-azioni { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 40px; padding: 12px 16px; }
.vt-azioni form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vt-scarichi { font-size: 13px; display: flex; flex-direction: column; gap: 2px; }

/* Formazione del PdV (mock formazione.php) */
.frm-list { display: flex; flex-direction: column; gap: 16px; }
.frm-card { display: grid; grid-template-columns: 320px 1fr; border: 1px solid var(--grigio-500); border-left: 5px solid var(--secondario-500); border-radius: 10px; background: #fff; overflow: hidden; }
.frm-card.senza-video { grid-template-columns: 1fr; }
.frm-video { width: 100%; height: 100%; min-height: 180px; background: #111; display: block; object-fit: contain; }
.frm-body { padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.frm-card-num { background: var(--secondario-500); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 10px; width: fit-content; }
.frm-card-title { font-size: 16px; font-weight: 700; color: var(--primario-500); line-height: 1.3; }
.frm-card-desc { font-size: 13px; color: var(--grigio-800); line-height: 1.6; }
.frm-pdf-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.frm-pdf-card { display: flex; align-items: center; border: 1px solid var(--grigio-500); border-radius: 8px; background: #fff; color: inherit; min-width: 200px; max-width: 300px; flex: 1; }
.frm-pdf-card:hover { border-color: var(--secondario-500); text-decoration: none; }
.frm-pdf-card-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #e74c3c, #c0392b); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 6px; margin: 6px 0 6px 8px; flex-shrink: 0; }
.frm-pdf-card-icon.remoto { background: linear-gradient(135deg, var(--primario-500), var(--secondario-500)); }
.frm-pdf-card-info { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.frm-pdf-card-name { font-size: 12px; font-weight: 600; }
.frm-pdf-card-action { font-size: 11px; font-weight: 600; color: var(--secondario-500); }
.test .domanda { display: flex; flex-direction: column; gap: 6px; }
.test .opzione { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.servizio-messaggio { background: #FEF3C7; color: #92600A; border-top: 1px solid #F0A92E; text-align: center; padding: 6px 8px; font-size: 12px; font-weight: 700; }
.servizio-messaggio i { margin-right: 4px; }
@media (max-width: 768px) { .frm-card { grid-template-columns: 1fr; } }
.etichetta.colore-blu, .pillola.colore-blu { --sf: #E6F0FB; --tx: var(--primario-500); }
.etichetta.colore-azzurro, .pillola.colore-azzurro { --sf: #E0F4FC; --tx: #0B6E9C; }
.etichetta.colore-giallo, .pillola.colore-giallo { --sf: #FEF3C7; --tx: #8A5A00; }
.etichetta.colore-arancio, .pillola.colore-arancio { --sf: #FFEDD5; --tx: #9A3412; }
.etichetta.colore-verde, .pillola.colore-verde { --sf: #E6F2DA; --tx: #3F6B14; }
.etichetta.colore-rosso, .pillola.colore-rosso { --sf: #FDF2F2; --tx: var(--errore); }
.etichetta.colore-viola, .pillola.colore-viola { --sf: #EDE9FE; --tx: #5B21B6; }
.etichetta.colore-grigio, .pillola.colore-grigio { --sf: var(--grigio-200); --tx: var(--grigio-900); }
.etichetta[class*="colore-"] { background: var(--sf); color: var(--tx); }
.pillole { display: flex; flex-wrap: wrap; gap: 8px; }
.pillola { --sf: #fff; --tx: var(--primario-500); display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 16px; border: 1px solid var(--grigio-500); background: var(--sf); color: var(--tx); font-size: 13px; font-weight: 600; }
.pillola:hover { text-decoration: none; border-color: var(--tx); }
.pillola.attiva { border: 2px solid var(--tx); padding: 4px 11px; }
.pillola .numero { background: #fff; color: var(--tx); border-radius: 10px; padding: 0 7px; font-size: 12px; }
.passaggi .pulsanti { flex-wrap: wrap; }
.passaggi-scelta { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* Formazione UPS: mini sito convertito da pointplanet.it/manuali/manualeups */
.ups-menu { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.ups-menu a { padding: 8px 14px; border: 1px solid var(--grigio-500); border-radius: 20px; background: #fff; color: #351c15; font-size: 14px; text-decoration: none; }
.ups-menu a.attiva { background: #351c15; border-color: #351c15; color: #fff; }
.ups-sezione { --ups-marrone: #351c15; --ups-giallo: #ffbe00; display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.6; }
.ups-sezione h1 { font-size: 22px; font-weight: 700; color: var(--ups-marrone); padding-bottom: 8px; border-bottom: 2px solid var(--ups-giallo); }
.ups-sezione h2 { font-size: 18px; font-weight: 700; color: var(--ups-marrone); padding-bottom: 6px; border-bottom: 1px solid var(--grigio-500); scroll-margin-top: 16px; }
.ups-sezione h3 { font-size: 16px; font-weight: 700; color: var(--ups-marrone); }
.ups-sezione h4 { font-size: 15px; font-weight: 700; color: var(--ups-marrone); }
.ups-sezione :is(h5, h6) { font-size: 14px; font-weight: 700; color: var(--ups-marrone); }
.ups-sezione :is(ul, ol) { padding-left: 22px; }
.ups-sezione :where(p, ul, ol, h3, h4, h5, h6, video, .avviso, .ups-riquadro, .ups-voce) + :where(p, ul, ol, video, .avviso, .ups-riquadro, .ups-voce, .ups-didascalia, .pulsante) { margin-top: 8px; }
.ups-sezione * + :where(h3, h4, h5, h6) { margin-top: 14px; }
.ups-sezione li > :where(ul, ol) { margin-top: 4px; }
.ups-sezione > *, .ups-scheda > * { margin-top: 0; }
.ups-intro { font-size: 16px; color: var(--grigio-900); }
.ups-riquadro { background: #fff; border: 1px solid var(--grigio-500); border-radius: var(--raggio); overflow: hidden; }
.ups-riquadro-testa { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--grigio-100); border-bottom: 1px solid var(--grigio-500); }
.ups-riquadro-testa > * { margin: 0; }
.ups-riquadro-testa i, .ups-voce > i { color: var(--ups-marrone); font-size: 20px; }
.ups-riquadro-corpo { padding: 14px 16px; }
.ups-riquadro.ups-passo { background: var(--grigio-100); border-left: 4px solid var(--ups-giallo); }
.ups-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ups-griglia.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ups-voce { display: flex; align-items: flex-start; gap: 14px; }
.ups-voce > i { font-size: 26px; width: 32px; text-align: center; flex-shrink: 0; }
.ups-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #111; border-radius: 8px; object-fit: contain; }
.ups-didascalia { font-size: 12px; color: var(--grigio-800); text-align: center; }
.ups-schede { display: flex; flex-wrap: wrap; gap: 8px; }
.ups-schede a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--grigio-500); border-radius: 16px; background: #fff; color: var(--ups-marrone); font-size: 13px; font-weight: 600; }
.ups-schede a:hover { border-color: var(--ups-giallo); text-decoration: none; }
.ups-scheda { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px; }
.ups-domanda { background: #fff; border: 1px solid var(--grigio-500); border-radius: 8px; overflow: hidden; }
.ups-domanda > summary { padding: 10px 16px; background: var(--grigio-100); color: var(--ups-marrone); font-weight: 600; cursor: pointer; }
.ups-domanda[open] > summary { background: #FFF5D6; border-bottom: 1px solid var(--grigio-500); }
.ups-domanda > div { padding: 12px 16px; }
@media (max-width: 767px) { .ups-griglia, .ups-griglia.tre { grid-template-columns: 1fr; } }

/* Contatore accanto alla voce del menu (verifiche in attesa) e riquadri della Home */
.bo-contatore { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 10px; background: #F0A92E; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.home { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.home-riquadro { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--bianco); border: 1px solid var(--grigio-500); border-radius: 6px; color: var(--testo); }
.home-riquadro:hover { background: var(--azzurro-chiaro); text-decoration: none; }
.home-riquadro .titolo { font-size: 13px; font-weight: 700; color: var(--primario-500); }
.home-riquadro .numero { font-size: 28px; font-weight: 700; }
.home-riquadro .testo { font-size: 12px; color: var(--grigio-800); }

/* ---------- Messaggi (templates/messaggi/, board del Promemoria di Worklife) ---------- */
/* Le linguette: non filtrano, portano i due numeri e saltano al gruppo. Restano sotto la testata. */
.msg-cima { position: sticky; top: 56px; z-index: 4; background: var(--grigio-200); padding: 8px 0 4px; border-bottom: 1px solid var(--grigio-500); }
.msg-scelte { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.msg-voce { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--grigio-500); border-radius: 16px; background: #fff; color: var(--grigio-900); font-size: 13px; }
.msg-voce:hover { border-color: var(--primario-500); text-decoration: none; }
.msg-voce.qui { background: var(--primario-500); border-color: var(--primario-500); color: #fff; font-weight: 600; }
.msg-voce.spenta { color: var(--grigio-800); border-style: dashed; }
.msg-tot, .msg-nuovi { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.msg-tot { background: var(--grigio-200); color: var(--grigio-800); }
.msg-nuovi { background: #F0A92E; color: #fff; }
.msg-cerca { margin-left: auto; }
.msg-cerca input { height: 32px; min-width: 230px; padding: 0 12px; border: 1px solid var(--grigio-500); border-radius: 16px; background: #fff; }
.msg-cerca input:focus { outline: none; border-color: var(--primario-500); }
.msg-esito { font-size: 13px; color: var(--grigio-900); margin-bottom: 6px; }
mark { background: #FEF3C7; color: #8A5A00; padding: 0 2px; border-radius: 3px; }

/* Le due colonne e i tre gruppi */
.msg-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 4px; }
.msg-col { min-width: 0; }
.msg-col-testa { display: flex; align-items: center; gap: 8px; padding: 8px 13px; margin-bottom: 12px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.msg-col-testa.dafare { background: var(--azzurro-chiaro); color: var(--primario-500); }
.msg-col-testa.fatte { background: #E6F2DA; color: #3F6B14; }
.msg-col-testa .conta { margin-left: auto; padding: 1px 9px; border-radius: 10px; background: rgba(255, 255, 255, .6); font-size: 12px; }
.msg-gruppo { margin-bottom: 18px; scroll-margin-top: 150px; }
.msg-gruppo-testa { display: flex; align-items: center; gap: 8px; padding: 0 3px 7px; font-size: 11px; font-weight: 700; color: var(--grigio-800); text-transform: uppercase; letter-spacing: .05em; }
.msg-gruppo-testa .conta { padding: 1px 8px; border-radius: 10px; background: #fff; letter-spacing: 0; }
.msg-separa { height: 1px; background: var(--grigio-500); margin: 16px 2px 12px; }
.msg-vuoto { padding: 20px 16px; border: 1px dashed var(--grigio-500); border-radius: 8px; background: #fff; text-align: center; color: var(--grigio-800); font-size: 13px; }
.msg-ripesca { font-size: 13px; }
.msg-ripesca a { color: var(--grigio-800); }

/* Le card */
.msg-card { margin-bottom: 10px; background: #fff; border: 1px solid var(--grigio-500); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 31, 87, .08); overflow: hidden; scroll-margin-top: 150px; }
.msg-card.nonletta { border-left: 4px solid var(--secondario-500); }
.msg-card.nonletta .msg-titolo { font-weight: 700; }
.msg-card.arch { background: var(--grigio-100); border-style: dashed; box-shadow: none; }
.msg-card.arch .msg-titolo { color: var(--grigio-800); }
.msg-testa { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 11px; padding: 10px 12px; cursor: pointer; }
.msg-testa:hover, .msg-card.aperta .msg-testa { background: var(--grigio-100); }
.msg-tondo { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primario-500); color: #fff; font-size: 12px; font-weight: 700; }
.msg-tondo.mio { background: var(--secondario-500); }
.msg-centro { flex: 1 1 220px; min-width: 0; }
.msg-titolo { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.msg-ritaglio { margin-top: 5px; padding-left: 9px; border-left: 2px solid var(--grigio-500); font-size: 12px; color: var(--grigio-900); }
.msg-dettagli { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 5px; font-size: 12px; color: var(--grigio-800); }
.msg-targa { padding: 1px 8px; border: 1px solid var(--grigio-500); border-radius: 10px; color: var(--primario-500); font-size: 11px; font-weight: 600; }
.msg-targa.mio { color: #0B6E9C; background: #E0F4FC; border-color: #B5E3F6; }
.msg-scade { font-weight: 600; color: var(--grigio-900); }
.msg-scade.scaduta { color: var(--errore); }
.msg-scade.vicina { color: #8A5A00; }
.msg-conta { font-weight: 600; color: var(--grigio-900); }
.msg-tasti { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.msg-tasti form { margin: 0; }
.msg-tasto { height: 28px; padding: 0 11px; border: 1px solid var(--grigio-500); border-radius: 14px; background: #fff; color: var(--grigio-900); font-size: 12px; cursor: pointer; }
.msg-tasto:hover { border-color: var(--primario-500); color: var(--primario-500); }
.msg-tasto.fatto:hover { border-color: var(--successo); color: #3F6B14; }
.msg-icona { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--grigio-800); cursor: pointer; }
.msg-icona:hover { background: var(--azzurro-chiaro); color: var(--primario-500); }

/* La conversazione, dentro la card o a tutto schermo */
.msg-pannello { display: none; border-top: 1px solid var(--grigio-500); background: var(--grigio-100); }
.msg-card.aperta .msg-pannello { display: block; }
.msg-pannello-corpo { padding: 12px 14px 14px; }
.msg-attesa { padding: 16px 0; text-align: center; color: var(--grigio-800); font-size: 13px; }
.msg-tasti-schermo { justify-content: flex-end; margin-bottom: 10px; }
.msg-chi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.msg-persona { padding: 3px 10px; border: 1px solid var(--grigio-500); border-radius: 12px; background: #fff; font-size: 12px; color: var(--grigio-900); }
.msg-persona.ha-fatto { background: #E6F2DA; border-color: #C9E2B0; color: #3F6B14; }
.msg-persona.ha-fatto::before { content: '✓ '; font-weight: 700; }
.msg-bolle { display: flex; flex-direction: column; gap: 9px; max-height: 360px; overflow-y: auto; padding-right: 3px; }
.msg-schermo .msg-bolle { max-height: none; }
.msg-bolla { align-self: flex-start; max-width: 82%; padding: 9px 13px; border: 1px solid var(--grigio-500); border-radius: 12px 12px 12px 4px; background: #fff; }
.msg-bolla.mia { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--primario-500); border-color: var(--primario-500); color: #fff; }
.msg-bolla .autore { margin-bottom: 3px; font-size: 11px; font-weight: 700; color: var(--primario-500); }
.msg-bolla .corpo { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.msg-bolla .corpo :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 6px; }
.msg-bolla .corpo :is(ul, ol) { padding-left: 20px; }
.msg-bolla.mia .corpo a { color: #fff; text-decoration: underline; }
.msg-bolla .ora { margin-top: 4px; font-size: 11px; color: var(--grigio-800); }
.msg-bolla.mia .ora { color: rgba(255, 255, 255, .75); }
.msg-striscia { display: flex; justify-content: center; }
.msg-striscia span { padding: 3px 12px; border: 1px solid var(--grigio-500); border-radius: 12px; background: var(--grigio-200); color: var(--grigio-800); font-size: 11px; text-align: center; }
.msg-rispondi { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg-riga-tasti { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* Gli allegati: le immagini si guardano, il resto è una pillola */
.msg-allegati { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.msg-foto { display: block; width: 96px; height: 96px; border: 1px solid var(--grigio-500); border-radius: 8px; overflow: hidden; background: #fff; }
.msg-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-pillola { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 11px; border: 1px solid var(--grigio-500); border-radius: 14px; background: #fff; color: var(--grigio-900); font-size: 12px; }
.msg-pillola:hover { border-color: var(--primario-500); text-decoration: none; }
.msg-pillola .est { padding: 1px 6px; border-radius: 4px; background: var(--grigio-200); font-size: 10px; font-weight: 700; }
.msg-pillola .nome { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-pillola .peso { color: var(--grigio-800); }
.msg-bolla.mia .msg-pillola { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.msg-bolla.mia .msg-pillola .est { background: rgba(255, 255, 255, .2); }
.msg-bolla.mia .msg-pillola .peso { color: rgba(255, 255, 255, .75); }
.msg-attacca { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 32px; padding: 0 12px; border: 1px dashed var(--grigio-800); border-radius: 16px; background: #fff; color: var(--grigio-900); font-size: 12px; cursor: pointer; }
.msg-attacca:hover, .msg-attacca.pieno { border-color: var(--primario-500); color: var(--primario-500); }
.msg-attacca.pieno { border-style: solid; font-weight: 600; }
.msg-attacca input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.msg-attacca-testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le finestre: nuovo messaggio, tutto schermo, lente, guida */
.msg-finestra { width: min(560px, 94vw); max-height: 92vh; margin: auto; padding: 0; border: 1px solid var(--grigio-500); border-radius: 10px; background: #fff; color: var(--testo); box-shadow: 0 12px 40px rgba(0, 31, 87, .25); }
.msg-finestra::backdrop { background: rgba(0, 31, 87, .45); }
.msg-finestra[open] { display: flex; flex-direction: column; }
.msg-finestra > form { display: flex; flex-direction: column; min-height: 0; }
.msg-finestra-testa { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--grigio-500); }
.msg-finestra-testa strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--primario-500); }
.msg-chiudi { border: 0; background: transparent; color: var(--grigio-800); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.msg-chiudi:hover { color: var(--testo); }
.msg-finestra-corpo { display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow-y: auto; }
.msg-finestra-piede { display: flex; justify-content: flex-end; gap: 9px; padding: 12px 16px; border-top: 1px solid var(--grigio-500); background: var(--grigio-100); }
.msg-quando { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.msg-quando input { height: 32px; padding: 0 8px; border: 1px solid var(--grigio-500); border-radius: 6px; }
.msg-a-chi-testa { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.msg-trova { margin-left: auto; height: 28px; padding: 0 10px; border: 1px solid var(--grigio-500); border-radius: 14px; font-size: 12px; }
.msg-persone { max-height: 190px; overflow-y: auto; padding: 6px; border: 1px solid var(--grigio-500); border-radius: 6px; }
.msg-dove { padding: 6px 8px 3px; font-size: 11px; color: var(--grigio-800); text-transform: uppercase; letter-spacing: .05em; }
.msg-persone label { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.msg-persone label:hover { background: var(--grigio-200); }
.msg-persone label[hidden], .msg-persone-gruppo[hidden] { display: none; }
.msg-basta-uno { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border: 0; border-radius: 6px; background: var(--grigio-200); font-size: 13px; }
.msg-basta-uno[hidden] { display: none; }
.msg-basta-uno legend { float: left; margin-bottom: 4px; font-weight: 700; }
.msg-basta-uno label { display: flex; align-items: center; gap: 8px; }
.msg-schermo { width: min(1100px, 96vw); height: 92vh; }
.msg-schermo-corpo { flex: 1; min-height: 0; overflow-y: auto; background: var(--grigio-100); }
.msg-lente { width: auto; max-width: 96vw; }
.msg-lente-corpo { display: flex; align-items: center; justify-content: center; min-height: 0; overflow: auto; background: #0F172A; }
.msg-lente-corpo img, .msg-lente-corpo video { display: block; max-width: 92vw; max-height: 80vh; }
.msg-lente-corpo iframe { width: 90vw; height: 80vh; border: 0; background: #fff; }
.msg-guida { width: min(860px, 96vw); }
.msg-guida-corpo { padding: 18px 24px 28px; overflow-y: auto; font-size: 14px; line-height: 1.55; color: var(--grigio-900); }

/* La guida «Come funziona» */
.msg-guida-testo { display: flex; flex-direction: column; gap: 8px; }
.msg-guida-testo .occhiello { color: var(--grigio-800); }
.msg-guida-testo h3 { margin-top: 14px; padding-bottom: 5px; border-bottom: 2px solid var(--grigio-500); font-size: 15px; color: var(--primario-500); }
.msg-guida-testo :is(ul, ol) { padding-left: 22px; }
.msg-guida-testo li + li { margin-top: 3px; }
.msg-guida-breve { padding: 12px 16px; border: 1px solid var(--azzurro-chiaro); border-radius: 8px; background: #F4F8FD; }
.msg-guida-testo table { width: 100%; border-collapse: collapse; font-size: 13px; }
.msg-guida-testo th { padding: 7px 10px; border: 1px solid var(--grigio-500); background: var(--grigio-100); text-align: left; color: var(--primario-500); }
.msg-guida-testo td { padding: 7px 10px; border: 1px solid var(--grigio-500); vertical-align: top; }
.msg-stato { padding: 1px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.msg-stato.aperto { background: var(--azzurro-chiaro); color: var(--primario-500); }
.msg-stato.fatto { background: #E6F2DA; color: #3F6B14; }
.msg-stato.arch { background: var(--grigio-200); color: var(--grigio-900); }
.msg-guida-riga { padding: 2px 10px; border: 1px solid var(--grigio-500); border-radius: 10px; background: var(--grigio-200); color: var(--grigio-800); font-size: 11px; white-space: nowrap; }
.msg-guida-testo kbd { padding: 0 5px; border: 1px solid var(--grigio-800); border-bottom-width: 2px; border-radius: 4px; background: var(--grigio-100); font-family: inherit; font-size: 12px; }

/* L'avviso in basso a destra, in ogni pagina del guscio */
.msg-avviso { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 16px; border-radius: 8px; background: var(--primario-500); box-shadow: 0 8px 24px rgba(0, 31, 87, .3); }
.msg-avviso[hidden] { display: none; }
.msg-avviso a { color: #fff; font-size: 14px; font-weight: 600; }
.msg-avviso .msg-chiudi { color: rgba(255, 255, 255, .8); font-size: 20px; }
.msg-avviso .msg-chiudi:hover { color: #fff; }

@media (max-width: 900px) {
  .msg-colonne { grid-template-columns: 1fr; gap: 20px; }
  .msg-testa { flex-wrap: wrap; }
  .msg-tasti { width: 100%; justify-content: flex-end; }
  .msg-cerca { margin-left: 0; width: 100%; }
  .msg-cerca input { width: 100%; min-width: 0; }
  .msg-bolla { max-width: 92%; }
}