/* ============================================
   PeritoMap — CSS Base
   Mobile-first, contrasto alto, uso outdoor
   ============================================ */

/* === Custom Properties === */
:root {
  /* Colori primari */
  --colore-primario: #1a73e8;
  --colore-primario-scuro: #1557b0;
  --colore-primario-chiaro: #e8f0fe;
  --colore-primario-rgb: 26, 115, 232;

  /* Colori semantici */
  --colore-successo: #0d904f;
  --colore-successo-chiaro: #e6f4ea;
  --colore-avviso: #e37400;
  --colore-avviso-chiaro: #fef7e0;
  --colore-errore: #d93025;
  --colore-errore-chiaro: #fce8e6;
  --colore-info: #1a73e8;
  --colore-info-chiaro: #e8f0fe;

  /* Colori anzianita spilli */
  --anzianita-verde: #0d904f;
  --anzianita-giallo: #f9ab00;
  --anzianita-arancio: #e37400;
  --anzianita-rosso: #d93025;
  --anzianita-viola: #7b1fa2;
  --anzianita-nero: #202124;

  /* Colori neutri */
  --colore-sfondo: #f8f9fa;
  --colore-sfondo-secondario: #f1f3f4;
  --colore-superficie: #ffffff;
  --colore-bordo: #dadce0;
  --colore-bordo-leggero: #f0f0f0;
  --colore-testo: #202124;
  --colore-testo-secondario: #4a4e51;
  --colore-testo-disabilitato: #6d7175;
  --colore-overlay: rgba(0, 0, 0, 0.5);

  /* Priorita */
  --priorita-bassa: #0d904f;
  --priorita-normale: #1a73e8;
  --priorita-alta: #e37400;
  --priorita-urgente: #d93025;
  --colore-priorita-bassa: #0d904f;
  --colore-priorita-normale: #1a73e8;
  --colore-priorita-alta: #e37400;
  --colore-priorita-urgente: #d93025;

  /* Dimensioni */
  --topbar-altezza: 56px;
  --nav-bottom-altezza: 56px;
  --menu-larghezza: 280px;
  --raggio-bordo: 8px;
  --raggio-bordo-piccolo: 4px;
  --raggio-bordo-grande: 12px;

  /* Spaziature */
  --spazio-xs: 4px;
  --spazio-sm: 8px;
  --spazio-md: 16px;
  --spazio-lg: 24px;
  --spazio-xl: 32px;
  --spazio-xxl: 48px;

  /* Ombre */
  --ombra-leggera: 0 1px 2px rgba(0,0,0,0.1);
  --ombra-media: 0 2px 8px rgba(0,0,0,0.15);
  --ombra-forte: 0 4px 16px rgba(0,0,0,0.2);
  --ombra-topbar: 0 2px 4px rgba(0,0,0,0.1);

  /* Transizioni */
  --transizione: 0.2s ease;
  --transizione-lenta: 0.3s ease;

  /* Font */
  --font-famiglia: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
}

/* === Reset === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-famiglia);
  color: var(--colore-testo);
  background: var(--colore-sfondo);
  line-height: 1.5;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
}

a { color: var(--colore-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* === Utilita === */
.nascosto { display: none !important; }
.invisibile { visibility: hidden; }

/* === Schermata di caricamento === */
.schermata-caricamento {
  position: fixed;
  inset: 0;
  background: var(--colore-superficie);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.caricamento-contenuto {
  text-align: center;
}

.caricamento-titolo {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--colore-primario);
  margin: var(--spazio-md) 0;
}

.caricamento-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--colore-bordo);
  border-top-color: var(--colore-primario);
  border-radius: 50%;
  margin: var(--spazio-md) auto;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.caricamento-messaggio {
  color: var(--colore-testo-secondario);
  font-size: 0.875rem;
}

/* === Schermata login === */
.schermata-login {
  position: fixed;
  inset: 0;
  background: var(--colore-sfondo);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  overflow-y: auto;
  padding: var(--spazio-md);
}

.login-contenitore {
  width: 100%;
  max-width: 400px;
  background: var(--colore-superficie);
  border-radius: var(--raggio-bordo-grande);
  padding: var(--spazio-xl);
  box-shadow: var(--ombra-media);
}

.login-logo {
  text-align: center;
  margin-bottom: var(--spazio-xl);
}

.login-logo h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--colore-primario);
  margin-top: var(--spazio-sm);
}

.login-sottotitolo {
  color: var(--colore-testo-secondario);
  font-size: 0.875rem;
  margin-top: var(--spazio-xs);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-md);
}

.campo-input {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-xs);
}

.campo-input label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--colore-testo);
}

.campo-input input,
.campo-input select,
.campo-input textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  font-size: 1rem;
  font-family: inherit;
  color: var(--colore-testo);
  background: var(--colore-superficie);
  transition: border-color var(--transizione);
  -webkit-appearance: none;
}

.campo-input input:focus,
.campo-input select:focus,
.campo-input textarea:focus {
  outline: none;
  border-color: var(--colore-primario);
  box-shadow: 0 0 0 3px rgba(var(--colore-primario-rgb), 0.15);
}

.campo-input input::placeholder {
  color: var(--colore-testo-disabilitato);
}

/* I checkbox/radio non devono ereditare lo stile "casella a tutta larghezza"
   degli input di testo (altrimenti appaiono come un riquadro vuoto). */
.campo-input input[type="checkbox"],
.campo-input input[type="radio"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--colore-primario);
}

/* Riga con interruttore + etichetta (checkbox a sinistra, testo a destra) */
.toggle-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-sm);
  cursor: pointer;
}

.campo-password {
  position: relative;
}

.campo-password input {
  padding-right: 44px;
}

.btn-mostra-password {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--colore-testo-secondario);
  cursor: pointer;
  padding: 12px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raggio-bordo-piccolo);
}

.btn-mostra-password:hover {
  color: var(--colore-testo);
}

/* === Bottoni === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-sm);
  padding: 12px 20px;
  border: none;
  border-radius: var(--raggio-bordo);
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transizione);
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primario {
  background: var(--colore-primario);
  color: #fff;
}

.btn-primario:hover {
  background: var(--colore-primario-scuro);
}

.btn-primario:disabled {
  background: var(--colore-testo-disabilitato);
  cursor: not-allowed;
}

.btn-secondario {
  background: var(--colore-sfondo-secondario);
  color: var(--colore-primario);
  border: 1.5px solid var(--colore-primario);
}

.btn-secondario:hover {
  background: var(--colore-primario-chiaro);
}

.btn-pericolo {
  background: var(--colore-errore);
  color: #fff;
}

.btn-pericolo:hover {
  background: #c5221f;
}

.btn-grande {
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
}

.btn-piccolo {
  padding: 8px 14px;
  font-size: 0.8125rem;
  min-height: 36px;
}

.btn-google {
  background: var(--colore-superficie);
  color: var(--colore-testo);
  border: 1.5px solid var(--colore-bordo);
}

.btn-google:hover {
  background: var(--colore-sfondo);
}

.btn-link {
  background: none;
  border: none;
  color: var(--colore-primario);
  cursor: pointer;
  font-size: 0.875rem;
  font-family: inherit;
  padding: var(--spazio-sm);
}

.btn-link:hover {
  text-decoration: underline;
}

.login-separatore {
  display: flex;
  align-items: center;
  gap: var(--spazio-md);
  margin: var(--spazio-lg) 0;
  color: var(--colore-testo-secondario);
  font-size: 0.8125rem;
}

.login-separatore::before,
.login-separatore::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--colore-bordo);
}

.login-link {
  text-align: center;
  margin-top: var(--spazio-md);
}

.login-link a {
  font-size: 0.875rem;
  display: inline-block;
  padding: 12px 16px;
  min-height: 44px;
  line-height: 20px;
}

/* === Schermata PIN === */
.schermata-pin {
  position: fixed;
  inset: 0;
  background: var(--colore-superficie);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}

.pin-contenitore {
  text-align: center;
  padding: var(--spazio-xl);
  width: 100%;
  max-width: 320px;
}

.pin-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--colore-primario);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 auto var(--spazio-md);
}

.pin-nome {
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: var(--spazio-xs);
}

.pin-messaggio {
  color: var(--colore-testo-secondario);
  font-size: 0.875rem;
  margin-bottom: var(--spazio-lg);
}

.pin-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--spazio-xl);
}

.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--colore-bordo);
  transition: all var(--transizione);
}

.pin-dot.attivo {
  background: var(--colore-primario);
  border-color: var(--colore-primario);
}

.pin-dot.errore {
  background: var(--colore-errore);
  border-color: var(--colore-errore);
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.pin-tastierino {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 240px;
  margin: 0 auto var(--spazio-lg);
}

.pin-tasto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--colore-bordo);
  background: var(--colore-superficie);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--colore-testo);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: all var(--transizione);
  font-family: inherit;
}

.pin-tasto:active {
  background: var(--colore-primario-chiaro);
  border-color: var(--colore-primario);
}

.pin-tasto-vuoto {
  border: none;
  cursor: default;
}

.pin-tasto-cancella {
  color: var(--colore-testo-secondario);
}

/* === App principale === */
.app-principale {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* === Topbar === */
.topbar {
  height: var(--topbar-altezza);
  background: var(--colore-primario);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 var(--spazio-sm);
  box-shadow: var(--ombra-topbar);
  z-index: 100;
  flex-shrink: 0;
}

.topbar-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transizione);
}

.topbar-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.topbar-titolo {
  flex: 1;
  font-size: 1.125rem;
  font-weight: 600;
  padding: 0 var(--spazio-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-azioni {
  display: flex;
  align-items: center;
  gap: var(--spazio-xs);
}

.topbar-btn-notifiche {
  position: relative;
}

.badge-notifiche {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--colore-errore);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* === Menu laterale === */
.overlay-menu {
  position: fixed;
  inset: 0;
  background: var(--colore-overlay);
  z-index: 200;
  opacity: 0;
  transition: opacity var(--transizione-lenta);
  pointer-events: none;
}

.overlay-menu.visibile {
  opacity: 1;
  pointer-events: auto;
}

.menu-laterale {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--menu-larghezza);
  height: 100%;
  background: var(--colore-superficie);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform var(--transizione-lenta);
  display: flex;
  flex-direction: column;
  box-shadow: var(--ombra-forte);
}

.menu-laterale.aperto {
  transform: translateX(0);
}

.menu-header {
  padding: var(--spazio-lg);
  background: var(--colore-primario);
  color: #fff;
}

.menu-utente {
  display: flex;
  align-items: center;
  gap: var(--spazio-md);
}

.menu-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.menu-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.menu-nome {
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-ruolo {
  font-size: 0.75rem;
  opacity: 0.85;
  text-transform: capitalize;
}

.menu-studio {
  font-size: 0.6875rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-voci {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  padding: var(--spazio-sm) 0;
}

.menu-voce {
  display: flex;
  align-items: center;
  gap: var(--spazio-md);
  padding: 12px var(--spazio-lg);
  color: var(--colore-testo);
  font-size: 0.9375rem;
  transition: background var(--transizione);
  text-decoration: none;
}

.menu-voce:hover {
  background: var(--colore-sfondo);
  text-decoration: none;
}

/* Icone del menu: illustrazioni SVG lucide "finto-3D" (oggetti con volume,
   riflesso e ombra). Sono autonome (colore incorporato), quindi niente
   pastiglia: solo dimensione e una leggera ombra portata per dare profondita'. */
.menu-voce > svg {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.20));
  transition: transform 0.12s ease;
}
.menu-voce:hover > svg { transform: translateY(-1px) scale(1.04); }

/* Azioni rapide nel dettaglio incarico: icona colorata per azione */
#btn-azione-appuntamento svg { color: #e8710a; }
#btn-azione-chat svg { color: #00838f; }
#btn-azione-naviga svg { color: #0d904f; }
.azione-rapida[href^="tel:"] svg { color: #1a73e8; }
#btn-azione-mappa svg { color: #c5221f; }

.menu-voce.attiva {
  color: var(--colore-primario);
  background: var(--colore-primario-chiaro);
  font-weight: 500;
}

.menu-voce-pericolo {
  color: var(--colore-errore) !important;
}

.menu-separatore {
  height: 1px;
  background: var(--colore-bordo);
  margin: var(--spazio-sm) 0;
}

.menu-footer {
  padding: var(--spazio-md) var(--spazio-lg);
  border-top: 1px solid var(--colore-bordo);
}

.menu-versione {
  font-size: 0.75rem;
  color: var(--colore-testo-disabilitato);
}

/* === Contenuto principale === */
.contenuto-principale {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* === Viste === */
.vista {
  min-height: 100%;
  padding: var(--spazio-md);
}

.vista-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spazio-lg);
}

.vista-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
}

.vista-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  color: var(--colore-testo-disabilitato);
  gap: var(--spazio-md);
}

.vista-placeholder p {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--colore-testo-secondario);
}

.vista-placeholder-sub {
  font-size: 0.8125rem;
}

/* === Navigazione bottom === */
.nav-bottom {
  height: var(--nav-bottom-altezza);
  background: var(--colore-superficie);
  border-top: 1px solid var(--colore-bordo);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--colore-testo-secondario);
  font-size: 0.6875rem;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--raggio-bordo);
  transition: color var(--transizione);
  min-width: 64px;
}

.nav-btn.attiva {
  color: var(--colore-primario);
}

/* Icone a gradiente: piene e a colori sulla voce attiva, attenuate (grigio)
   sulle inattive — l'effetto ricco resta ma l'attiva risalta. */
.nav-btn svg {
  transition: filter var(--transizione), opacity var(--transizione);
}
.nav-btn:not(.attiva) svg {
  filter: grayscale(0.85);
  opacity: 0.55;
}
.nav-btn.attiva svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
  opacity: 1;
}

.nav-btn:active {
  background: var(--colore-primario-chiaro);
}

/* === Toast === */
.contenitore-toast {
  position: fixed;
  bottom: calc(var(--nav-bottom-altezza) + var(--spazio-md));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-sm);
  pointer-events: none;
  width: calc(100% - var(--spazio-xl));
  max-width: 400px;
}

.toast {
  background: var(--colore-testo);
  color: #fff;
  padding: 12px var(--spazio-md);
  border-radius: var(--raggio-bordo);
  font-size: 0.875rem;
  box-shadow: var(--ombra-forte);
  display: flex;
  align-items: center;
  gap: var(--spazio-sm);
  pointer-events: auto;
  animation: toastIn 0.3s ease;
}

.toast.toast-uscita {
  animation: toastOut 0.3s ease forwards;
}

.toast-successo { background: var(--colore-successo); }
.toast-errore { background: var(--colore-errore); }
.toast-avviso { background: var(--colore-avviso); }
.toast-info { background: var(--colore-primario); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(20px); }
}

/* === Modale === */
.modale {
  position: fixed;
  inset: 0;
  background: var(--colore-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spazio-md);
}

/* Il popup di conferma deve stare SOPRA tutto, anche sopra il visualizzatore
   foto a tutto schermo (z-index 9998): altrimenti la conferma di cancellazione
   finisce dietro la foto. */
#modale-conferma { z-index: 10001; }

.modale-contenuto {
  background: var(--colore-superficie);
  border-radius: var(--raggio-bordo-grande);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--ombra-forte);
  animation: modaleIn 0.2s ease;
}

.modale-grande {
  max-width: 520px;
}

@keyframes modaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.modale-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spazio-lg) var(--spazio-lg) var(--spazio-md);
}

.modale-header h2 {
  font-size: 1.125rem;
  font-weight: 600;
}

.btn-chiudi-modale {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--colore-testo-secondario);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.btn-chiudi-modale:hover {
  background: var(--colore-sfondo);
}

.modale-corpo {
  padding: 0 var(--spazio-lg) var(--spazio-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spazio-md);
}

.modale-corpo p {
  color: var(--colore-testo-secondario);
  font-size: 0.875rem;
  line-height: 1.5;
}

.modale-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spazio-sm);
  padding: var(--spazio-md) var(--spazio-lg) var(--spazio-lg);
  border-top: 1px solid var(--colore-bordo);
}

/* Modale appuntamento: il calendario nativo del campo "data e ora" (su desktop)
   si apre sotto al campo. Diamo spazio sotto al campo, cosi' la tendina ricade
   nell'area del modulo e i pulsanti del footer restano sempre visibili. */
#modale-appuntamento .modale-corpo {
  min-height: 300px;
}

/* === Skeleton === */
.skeleton-lista {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-md);
}

.skeleton-riga {
  height: 56px;
  background: linear-gradient(90deg, var(--colore-sfondo) 25%, #e8eaed 50%, var(--colore-sfondo) 75%);
  background-size: 200% 100%;
  border-radius: var(--raggio-bordo);
  animation: skeleton 1.5s infinite;
}

@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Lista utenti === */
.lista-utenti {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-sm);
}

.scheda-utente {
  display: flex;
  align-items: center;
  gap: var(--spazio-md);
  padding: var(--spazio-md);
  background: var(--colore-superficie);
  border-radius: var(--raggio-bordo);
  box-shadow: var(--ombra-leggera);
  cursor: pointer;
  transition: box-shadow var(--transizione);
}

.scheda-utente:hover {
  box-shadow: var(--ombra-media);
}

.scheda-utente-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--colore-primario);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.scheda-utente-avatar.inattivo {
  background: var(--colore-testo-disabilitato);
}

/* === Compagnie === */
.vista-sottotitolo {
  color: var(--colore-testo-secondario);
  font-size: 0.875rem;
  margin: 0 0 var(--spazio-md);
}

.lista-compagnie {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-sm);
}

.compagnia-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-md);
  padding: var(--spazio-md);
  background: var(--colore-superficie);
  border-radius: var(--raggio-bordo);
  box-shadow: var(--ombra-leggera);
}

.compagnia-logo-mini,
.compagnia-iniziali {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colore-sfondo);
  object-fit: contain;
}

.compagnia-iniziali {
  background: var(--colore-primario);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
}

.compagnia-nome {
  flex: 1;
  font-weight: 600;
}

.compagnia-logo-anteprima {
  display: flex;
  align-items: center;
  gap: var(--spazio-md);
  margin-top: var(--spazio-sm);
}

.compagnia-logo-anteprima img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
}

.campo-aiuto {
  font-size: 0.8rem;
  color: var(--colore-testo-secondario);
  margin: 4px 0 0;
}

.vuoto-messaggio {
  text-align: center;
  color: var(--colore-testo-secondario);
  padding: var(--spazio-xl) var(--spazio-md);
}

/* Carrozzerie */
.carrozzeria-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.carrozzeria-meta { font-size: 13px; color: var(--colore-testo-secondario); }
.carrozzeria-nome-dett { font-weight: 600; margin: 0 0 2px; }

/* Indicatore "N foto in attesa di caricamento" (coda offline). Sempre visibile
   sopra la navigazione finche' ci sono foto non ancora caricate sul server. */
.indicatore-coda-foto {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--nav-bottom-altezza) + 8px);
  z-index: 9000;
  background: var(--colore-avviso);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--ombra-media);
  pointer-events: none;
  max-width: 92%;
  text-align: center;
}

/* === Configurazione foto cliente === */
.configfoto-campi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.configfoto-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-sm);
  padding: 10px 12px;
  background: var(--colore-sfondo-secondario);
  border-radius: var(--raggio-bordo);
  cursor: pointer;
}

.configfoto-riga input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.configfoto-etichetta { flex: 1; }

.configfoto-bloccato {
  opacity: 0.65;
  cursor: not-allowed;
}

.configfoto-lucchetto {
  font-size: 0.75rem;
  color: var(--colore-testo-secondario);
  font-style: italic;
}

.dettaglio-config-foto {
  margin-top: var(--spazio-sm);
}

/* Upload logo studio (impostazioni) */
.imp-logo-box {
  display: flex;
  align-items: center;
  gap: var(--spazio-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.imp-logo-anteprima {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
}

/* Ricezione incarichi via email (impostazioni studio) */
.imp-email-riga {
  display: flex;
  gap: var(--spazio-sm);
  align-items: stretch;
  flex-wrap: wrap;
}

.imp-email-riga input {
  flex: 1;
  min-width: 0;
  font-family: monospace;
  font-size: 0.95rem;
  padding: 10px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  background: var(--colore-sfondo);
  color: var(--colore-testo);
}

.imp-email-istruzioni {
  margin: var(--spazio-sm) 0 0;
  padding-left: 1.25rem;
  color: var(--colore-testo-secondario);
  font-size: 0.9rem;
  line-height: 1.5;
}

.imp-email-istruzioni li {
  margin-bottom: 4px;
}

/* Campo input con bottone affiancato (es. ubicazione + Cerca) */
.campo-con-bottone {
  display: flex;
  gap: var(--spazio-sm);
  align-items: stretch;
}

.campo-con-bottone input {
  flex: 1;
  min-width: 0;
}

.campo-con-bottone .btn {
  flex-shrink: 0;
}

/* Ubicazione bene danneggiato: ROSSO e grassetto, subito sotto l'indirizzo,
   per attirare l'attenzione dell'operatore ed evitare errori di fretta. */
.ubicazione-riga .dettaglio-riga-label { color: #c62828; font-weight: 700; }
.ubicazione-valore { color: #c62828; font-weight: 700; }
.ubicazione-indirizzo { color: #c62828; font-weight: 600; font-size: 13px; }
.ubicazione-modifica {
  background: none;
  border: none;
  color: var(--colore-primario);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0 0 0 6px;
  text-decoration: underline;
}

/* Editor soglie anzianita (giorni per i colori dello spillo) */
.soglie-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.soglia-riga {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.soglia-pallino {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.soglia-nome { font-weight: 600; min-width: 62px; }

.soglia-fino,
.soglia-gg {
  color: var(--colore-testo-secondario);
  font-size: 0.82rem;
}

.soglia-input {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--colore-bordo);
  border-radius: 6px;
  text-align: center;
  font: inherit;
}

.soglia-riga-nero .soglia-fino { font-style: italic; }

.toggle-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
}

.toggle-inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.scheda-utente-info {
  flex: 1;
  overflow: hidden;
}

.scheda-utente-nome {
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scheda-utente-dettagli {
  font-size: 0.75rem;
  color: var(--colore-testo-secondario);
  display: flex;
  gap: var(--spazio-sm);
}

.scheda-utente-ruolo {
  text-transform: capitalize;
}

.etichetta-ruolo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 500;
}

.etichetta-ruolo-titolare { background: #e8f0fe; color: #1a73e8; }
.etichetta-ruolo-segreteria { background: #e6f4ea; color: #0d904f; }
.etichetta-ruolo-sub-segreteria { background: #fef7e0; color: #e37400; }
.etichetta-ruolo-operatore { background: #f3e8fd; color: #7b1fa2; }

/* === Profilo === */
.profilo-contenuto {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-lg);
}

.profilo-sezione {
  background: var(--colore-superficie);
  border-radius: var(--raggio-bordo);
  padding: var(--spazio-lg);
  box-shadow: var(--ombra-leggera);
}

.profilo-sezione h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--spazio-md);
  color: var(--colore-testo);
}

.profilo-campo {
  display: flex;
  justify-content: space-between;
  padding: var(--spazio-sm) 0;
  border-bottom: 1px solid var(--colore-sfondo);
}

.profilo-campo:last-child {
  border-bottom: none;
}

.profilo-campo-label {
  font-size: 0.875rem;
  color: var(--colore-testo-secondario);
}

.profilo-campo-valore {
  font-size: 0.875rem;
  font-weight: 500;
  text-align: right;
}

/* === Impostazioni === */
.impostazioni-contenuto {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-xl, 24px);
}

/* ---- Hub Impostazioni: scorciatoie a Gestione utenti / Compagnie / Carrozzerie ---- */
.impostazioni-hub {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-sm);
  margin-bottom: var(--spazio-lg);
}

.impostazioni-hub-card {
  display: flex;
  align-items: center;
  gap: var(--spazio-md);
  width: 100%;
  text-align: left;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  padding: var(--spazio-md);
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-shadow: var(--ombra-leggera);
}
.impostazioni-hub-card:active { background: var(--colore-primario-chiaro); }

.impostazioni-hub-icona {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colore-bordo-leggero);
}

.impostazioni-hub-testo { flex: 1; display: flex; flex-direction: column; }
.impostazioni-hub-testo strong { font-size: 0.95rem; }
.impostazioni-hub-testo small { font-size: 0.78rem; color: var(--colore-testo-secondario); }

.impostazioni-hub-freccia {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--colore-testo-secondario);
}

.impostazioni-titolo-studio {
  font-size: 1.1rem;
  font-weight: 700;
  margin: var(--spazio-md) 0 var(--spazio-md);
  padding-top: var(--spazio-md);
  border-top: 1px solid var(--colore-bordo-leggero);
}

/* Link "indietro" verso l'hub Impostazioni */
.vista-back {
  display: inline-block;
  margin-bottom: var(--spazio-sm);
  color: var(--colore-primario);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.vista-back:active { opacity: 0.7; }

.impostazione-sezione {
  background: var(--colore-superficie);
  border-radius: var(--raggio-bordo-grande);
  padding: var(--spazio-lg);
  box-shadow: var(--ombra-media, 0 2px 8px rgba(0, 0, 0, 0.1));
  border: 1px solid var(--colore-bordo);
  border-left: 4px solid var(--colore-primario);
}

/* Intestazione di sezione ben marcata: colore accento + riga divisoria,
   cosi' a colpo d'occhio si distinguono i vari blocchi delle impostazioni. */
.impostazione-sezione h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--colore-primario);
  margin: 0 0 var(--spazio-md) 0;
  padding-bottom: var(--spazio-sm);
  border-bottom: 2px solid var(--colore-bordo-leggero);
}

/* Righe interne separate da una linea leggera per leggibilita' */
.impostazione-sezione .impostazione-riga + .impostazione-riga {
  border-top: 1px solid var(--colore-bordo-leggero);
}

.impostazione-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spazio-sm) 0;
}

.impostazione-label {
  font-size: 0.875rem;
}

.impostazione-desc {
  font-size: 0.75rem;
  color: var(--colore-testo-secondario);
}

/* Toggle switch */
.toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--colore-bordo);
  border-radius: 14px;
  cursor: pointer;
  transition: background var(--transizione);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform var(--transizione);
  box-shadow: var(--ombra-leggera);
}

.toggle input:checked + .toggle-slider {
  background: var(--colore-primario);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* === Stato connessione === */
.barra-offline {
  background: #b45c00;
  color: #fff;
  text-align: center;
  padding: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  position: fixed;
  bottom: var(--nav-bottom-altezza);
  left: 0;
  right: 0;
  z-index: 150;
  transform: translateY(100%);
  transition: transform var(--transizione);
}

.barra-offline.visibile {
  transform: translateY(0);
}

/* === Responsive - tablet e desktop === */
@media (min-width: 768px) {
  .login-contenitore {
    padding: var(--spazio-xxl);
  }

  .nav-bottom {
    display: none;
  }

  .contenuto-principale {
    margin-left: var(--menu-larghezza);
  }

  .menu-laterale {
    transform: translateX(0);
    box-shadow: none;
    border-right: 1px solid var(--colore-bordo);
  }

  .overlay-menu {
    display: none !important;
  }

  #btn-menu {
    display: none;
  }

  .topbar {
    padding-left: calc(var(--menu-larghezza) + var(--spazio-md));
  }

  .contenitore-toast {
    bottom: var(--spazio-lg);
  }

  .barra-offline {
    bottom: 0;
    left: var(--menu-larghezza);
  }
}

/* === Accessibilita: focus visibile === */
:focus-visible {
  outline: 2px solid var(--colore-primario);
  outline-offset: 2px;
}

/* === Stampa (nasconde tutto tranne contenuto) === */
/* === Cronologia appuntamenti === */
.cron-intestazione { margin-bottom: var(--spazio-sm); }
.cron-meta { font-size: 0.85rem; color: var(--colore-testo-secondario); margin-top: 2px; }
.cron-attuale { margin: var(--spazio-sm) 0; }

.cron-lista {
  list-style: none;
  margin: var(--spazio-md) 0 0;
  padding: 0;
  border-left: 2px solid var(--colore-bordo);
}

.cron-voce {
  position: relative;
  padding: 0 0 var(--spazio-md) var(--spazio-md);
}

.cron-voce::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--colore-primario);
}

.cron-voce-testo { font-weight: 500; }
.cron-voce-meta { font-size: 0.8rem; color: var(--colore-testo-secondario); margin-top: 2px; }

/* Area di stampa: nascosta a schermo, unica visibile in stampa */
/* Icone piu' morbide: tratti arrotondati su tutte le icone dell'interfaccia
   (il CSS vince sugli attributi SVG, niente da cambiare nei singoli markup). */
.menu-voce svg,
.btn svg,
.azione-rapida svg,
.cal-gcal svg,
.workflow-btn svg,
.foto-sezione-titolo svg,
.camera-btn-chiudi svg,
.diario-check svg {
  stroke-linecap: round;
  stroke-linejoin: round;
}

#area-stampa { display: none; }
.stampa-titolo { font-size: 1.3rem; margin: 0 0 4px; }
.stampa-sub { font-size: 0.85rem; color: #555; margin: 0 0 16px; }

.stampa-tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.stampa-tabella th,
.stampa-tabella td {
  border: 1px solid #999;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.stampa-tabella th {
  background: #eee;
  font-weight: 700;
}

@media print {
  body > *:not(#area-stampa) { display: none !important; }
  #area-stampa { display: block !important; padding: 16px; color: #000; }
  #area-stampa .cron-voce::before { background: #000; }
  .stampa-tabella tr { page-break-inside: avoid; }
}

/* ---- Avvisi su voci di menu (Suggerimenti/Segnalazioni) ---- */
.menu-voce-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--colore-errore, #f44336);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.25);
}

/* Puntino rosso sul bottone del menu (hamburger): visibile a menu chiuso */
#btn-menu { position: relative; }
.topbar-punto-menu {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--colore-errore, #f44336);
  box-shadow: 0 0 0 2px var(--colore-superficie, #fff);
  animation: puntoMenuPulsa 1.6s ease-in-out infinite;
}
@keyframes puntoMenuPulsa {
  0%, 100% { box-shadow: 0 0 0 2px var(--colore-superficie, #fff), 0 0 0 0 rgba(244, 67, 54, 0.5); }
  50%      { box-shadow: 0 0 0 2px var(--colore-superficie, #fff), 0 0 0 6px rgba(244, 67, 54, 0); }
}