/* ============================================
   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;
  --anzianita-bianco: #ffffff;

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

/* Auto-riparazione App Check (compare solo su blocco verifica di sicurezza) */
.riparazione-appcheck {
  margin-top: var(--spazio-lg);
  padding: var(--spazio-md);
  border: 1px solid #f0c36d;
  background: #fff8e6;
  border-radius: 10px;
  text-align: center;
}

.riparazione-appcheck-testo {
  font-size: 0.875rem;
  color: #7a5b00;
  margin: 0 0 var(--spazio-md);
  line-height: 1.4;
}
.riparazione-appcheck-link {
  display: inline-block;
  margin-top: var(--spazio-sm);
  font-size: 0.85rem;
  min-height: 44px;
  line-height: 44px;
}

/* === Centro Diagnostica e riparazione === */
.diag-contenuto { max-width: 560px; }
.diag-corpo { padding: var(--spazio-md); }
.diag-intro {
  font-size: 0.9rem;
  color: var(--colore-testo-secondario);
  margin: 0 0 var(--spazio-md);
  line-height: 1.45;
}
.diag-azioni { display: flex; flex-direction: column; gap: var(--spazio-sm); }
.diag-azione {
  display: flex;
  align-items: center;
  gap: var(--spazio-md);
  width: 100%;
  text-align: left;
  padding: 14px;
  min-height: 56px;
  border: 1px solid var(--colore-bordo);
  border-radius: 12px;
  background: var(--colore-superficie);
  cursor: pointer;
}
.diag-azione:hover { border-color: var(--colore-primario); background: var(--colore-sfondo); }
.diag-azione-icona { font-size: 1.5rem; flex: 0 0 auto; }
.diag-azione-testo { display: flex; flex-direction: column; }
.diag-azione-titolo { font-weight: 600; font-size: 0.95rem; }
.diag-azione-desc { font-size: 0.8rem; color: var(--colore-testo-secondario); line-height: 1.35; }

.diag-stato {
  margin-top: var(--spazio-lg);
  padding: var(--spazio-md);
  background: var(--colore-sfondo);
  border-radius: 10px;
}
.diag-stato-titolo { font-size: 0.85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--colore-testo-secondario); margin: 0 0 var(--spazio-sm); }
.diag-stato-cara { font-size: 0.85rem; color: var(--colore-testo-secondario); }
.diag-stato-riga { display: flex; justify-content: space-between; gap: var(--spazio-md); padding: 4px 0; font-size: 0.85rem; border-bottom: 1px solid var(--colore-bordo); }
.diag-stato-riga:last-child { border-bottom: 0; }
.diag-stato-k { color: var(--colore-testo-secondario); flex: 0 0 auto; }
.diag-stato-v { text-align: right; word-break: break-word; }
.diag-stato-riga.allarme .diag-stato-v { color: #c0392b; font-weight: 600; }
.diag-rapporto-testo { width: 100%; min-height: 120px; margin-top: var(--spazio-sm); font-family: monospace; font-size: 0.75rem; }

/* === 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 === */
/* Il menu (e il suo overlay) devono stare SOPRA i controlli delle viste,
   inclusa la barra di ricerca della mappa (z-index 500) che altrimenti
   resta in primo piano e copre le prime voci del menu sullo smartphone. */
.overlay-menu {
  position: fixed;
  inset: 0;
  background: var(--colore-overlay);
  z-index: 700;
  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: 701;
  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; }

/* I popup della schermata di login ("Password dimenticata" e "Registra il tuo
   studio") devono stare SOPRA la login (z-index 9000): con il 1000 di default
   si aprivano DIETRO e il click sembrava non fare nulla. */
#modale-reset-password,
#modale-registra-studio { z-index: 9500; }

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

/* La modale Compagnia ha la sezione Moduli a due colonne: piu' larga su desktop
   (su mobile resta width:100% entro questo limite). */
#modale-compagnia .modale-contenuto { max-width: 760px; }

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

/* Footer accordo: tre pulsanti (Annulla / Invia per firma / Genera) — su mobile
   vanno a capo invece di stringersi/uscire. */
.accordo-footer { flex-wrap: wrap; }
.accordo-footer #accordo-invia-firma { white-space: nowrap; }

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

/* Sezioni della Gestione utenti (Titolare, Segreteria, ...) */
.utenti-sezione { margin-bottom: var(--spazio-lg); }
.utenti-sezione .scheda-utente { margin-bottom: var(--spazio-sm); }
.utenti-sezione-titolo {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 var(--spazio-sm);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--colore-bordo, #e2e6ea);
  color: var(--colore-testo-secondario);
}
.etichetta-ruolo-extra {
  font-size: 0.78rem;
  color: var(--colore-testo-secondario);
  font-style: italic;
}
.utenti-sezione-vuota {
  color: var(--colore-testo-secondario);
  font-style: italic;
  font-size: 0.88rem;
  margin: 0 0 var(--spazio-sm);
  padding: 2px 0;
}

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

/* Riga compagnia cliccabile (tutta la riga apre la modifica) */
.compagnia-riga-click {
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .12s, transform .08s, box-shadow .12s;
}
.compagnia-riga-click:hover,
.compagnia-riga-click:focus-visible {
  border-color: var(--colore-primario);
  box-shadow: var(--ombra-media, var(--ombra-leggera));
  outline: none;
}
.compagnia-riga-click:active { transform: scale(.995); }
.compagnia-riga-freccia {
  color: var(--colore-testo-secondario);
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.compagnia-badge-cliente {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--colore-primario);
  background: color-mix(in srgb, var(--colore-primario) 12%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Form compagnia: logo + opzioni avanzate collassabili */
.campo-facolt { font-weight: 400; color: var(--colore-testo-secondario); font-size: 0.85em; }
.compagnia-logo-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-md);
  flex-wrap: wrap;
}
.compagnia-logo-riga .compagnia-logo-anteprima { margin-top: 0; }
.compagnia-avanzate {
  margin-top: var(--spazio-md);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  background: var(--colore-sfondo);
}
.compagnia-avanzate > summary {
  cursor: pointer;
  padding: var(--spazio-md);
  font-weight: 600;
  list-style: none;
  user-select: none;
}
.compagnia-avanzate > summary::-webkit-details-marker { display: none; }
.compagnia-avanzate > summary small { font-weight: 400; color: var(--colore-testo-secondario); }
.compagnia-avanzate[open] > summary { border-bottom: 1px solid var(--colore-bordo); }
.compagnia-avanzate > .campo-input { padding: 0 var(--spazio-md); margin-top: var(--spazio-md); }
.compagnia-avanzate > .campo-input:last-child { padding-bottom: var(--spazio-md); }

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

/* ---- Suggeritore: i nomi compaiono SOTTO il campo mentre si digita ----
   (richiesta Massimo 28/7: senza dover aprire la tendina). Righe alte per il
   dito, la prima gia' evidenziata: si scrive e si tocca. */
.cerca-suggerimenti {
  margin-top: 4px;
  max-height: 232px;
  overflow-y: auto;
  border: 1px solid var(--colore-bordo, #d6dce5);
  border-radius: 10px;
  background: var(--colore-superficie, #fff);
  box-shadow: 0 6px 18px rgba(15, 30, 60, 0.10);
}
.cerca-sugg-riga {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--colore-bordo-chiaro, #eef1f5);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.cerca-sugg-riga:last-child { border-bottom: 0; }
.cerca-sugg-riga:hover,
.cerca-sugg-riga.attiva { background: rgba(26, 115, 232, 0.10); }
.cerca-sugg-nome { font-weight: 600; }
.cerca-sugg-nome mark {
  background: #ffe9a8;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.cerca-sugg-sotto {
  display: block;
  font-size: 0.8rem;
  color: var(--colore-testo-secondario, #5b6572);
  margin-top: 2px;
}
.cerca-sugg-vuoto {
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--colore-testo-secondario, #5b6572);
}

/* Titolo di una sotto-sezione dentro un form (es. "Autorizzazioni") */
.campo-sezione-titolo {
  display: block;
  font-weight: 700;
  margin: 4px 0 6px;
  padding-top: 10px;
  border-top: 1px solid var(--colore-bordo, #e2e6ea);
  color: var(--colore-testo, inherit);
}

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

/* Rubrica numeri della carrozzeria (max 20: didascalia + numero + WhatsApp) */
.carr-numeri { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.carr-numero-riga {
  display: flex;
  align-items: center;
  gap: 6px;
}
.carr-numero-riga .carr-num-etichetta { flex: 1 1 100px; min-width: 70px; }
.carr-numero-riga .carr-num-numero { flex: 1.4 1 130px; min-width: 110px; }

/* Editor "piu' numeri" riusabile (legale, agenzia): righe etichetta + numero. */
.numeri-editor .num-riga {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.numeri-editor .num-etichetta { flex: 1 1 100px; min-width: 70px; }
.numeri-editor .num-numero { flex: 1.4 1 130px; min-width: 110px; }
.carr-num-wa-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  cursor: pointer;
  color: var(--colore-testo-secondario);
}
.carr-num-wa-label input { accent-color: #25D366; width: 16px; height: 16px; }
.carrozzeria-nome-dett { font-weight: 600; margin: 0 0 2px; }

/* Multi-selezione clienti nella scheda Compagnia (molti-a-molti) */
.compagnia-clienti-lista { max-height: 180px; overflow-y: auto; }

/* Chip delle compagnie elencate nella scheda Cliente (societa' di gestione) */
.cliente-compagnie-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cliente-compagnia-chip {
  display: inline-block; padding: 4px 10px; border-radius: 14px;
  background: var(--colore-sfondo-alt, #eef2f7); color: var(--colore-testo, #1a2330);
  font-size: 13px; font-weight: 600;
}

/* 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%);
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  bottom: auto;
  z-index: 11000;
  background: var(--colore-avviso);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  cursor: pointer;
  max-width: 94%;
  text-align: center;
}
/* Memoria quasi piena (>=80%): il pop-up diventa ROSSO per avvisare a colpo
   d'occhio che lo spazio sta finendo (rischio "foto non salvata"). */
.indicatore-coda-foto.coda-memoria-alta {
  background: var(--colore-errore, #d93025);
}

/* Allarme ROSSO: foto NON salvata (vera perdita). Finestra centrale persistente
   sopra a tutto (anche la fotocamera), finche' l'operatore non conferma. */
.allarme-foto-non-salvata {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 12000;
  width: min(92%, 420px);
  background: #c62828;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 14px;
  padding: 22px 20px;
  text-align: center;
  box-shadow: 0 10px 44px rgba(0, 0, 0, 0.55);
}
.allarme-foto-titolo {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}
.allarme-foto-testo {
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 18px;
}
.allarme-foto-ok {
  display: block;
  width: 100%;
  background: #fff;
  color: #c62828;
  font-weight: 800;
  font-size: 1.02rem;
  border: none;
  border-radius: 999px;
  padding: 13px 22px;
  cursor: pointer;
}

/* === 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: riquadri, tutti uguali (1/8/2026) ----
   Richiesta Massimo: «facciamo tutti pulsanti quadrati, non lunghi come ora,
   ed anche la parte sotto. C'e' una differenziazione che crea confusione».
   Prima la pagina parlava due lingue — righe lunghe sopra, pannelli a
   fisarmonica sotto — per fare la stessa identica cosa: entrare in una
   impostazione. Ora un solo modo, una sola forma.
   La griglia si adatta da sola: 2 riquadri sul telefono, di piu' sul
   computer, senza soglie scritte a mano. */
.impostazioni-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--spazio-sm);
  margin-bottom: var(--spazio-lg);
}

.impostazioni-hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  /* Quadrato vero, non "quasi": e' quello che rende la griglia ordinata. */
  aspect-ratio: 1 / 1;
  text-align: center;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo-grande, 14px);
  padding: var(--spazio-md);
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-shadow: var(--ombra-leggera);
}

/* Il riquadro del settore aperto resta evidenziato: senza, aprendo un
   pannello non si capisce piu' da quale riquadro si e' arrivati. */
.impostazioni-hub-card.attiva {
  border-color: var(--colore-primario);
  box-shadow: 0 0 0 2px var(--colore-primario-chiaro, rgba(26, 115, 232, .25));
}

/* La freccia serviva alla riga lunga; nel quadrato e' solo rumore. */
.impostazioni-hub-card .impostazioni-hub-freccia { display: none; }

/* Nel quadrato c'e' posto per il NOME, non per la spiegazione.
   Provata anche la variante che la rimetteva sul computer: allungava il
   riquadro oltre il quadrato e rompeva l'allineamento della griglia — cioe'
   esattamente il difetto che si voleva togliere. Il nome basta; la
   spiegazione sta dentro il pannello, dove serve davvero. */
.impostazioni-hub-card .impostazioni-hub-testo small { display: none; }
.impostazioni-hub-card:active { background: var(--colore-primario-chiaro); }

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

.impostazioni-hub-testo { flex: 0 1 auto; display: flex; flex-direction: column; }
/* Nomi lunghi ("Assistente virtuale (danneggiato)") devono andare a capo
   dentro il quadrato invece di traboccare o troncarsi. */
.impostazioni-hub-testo strong {
  font-size: 0.88rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.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);
}

/* ---- Builder del nome file foto (a pulsanti, niente graffe da digitare) ---- */
.nomefile-builder {
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  padding: 10px;
  background: var(--colore-sfondo-secondario, #f7f8fa);
}
.nomefile-pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.nomefile-bottone-sep { opacity: 0.85; }
.nomefile-sequenza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 6px 8px;
  background: var(--colore-superficie, #fff);
  border: 1px dashed var(--colore-bordo);
  border-radius: 6px;
}
.nomefile-chip {
  display: inline-block;
  padding: 2px 8px;
  background: #e8f0fe;
  color: #1967d2;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
}
.nomefile-chip-sep {
  background: transparent;
  color: var(--colore-testo, #333);
  font-weight: 700;
  padding: 2px 2px;
}
.nomefile-vuoto { color: var(--colore-testo-secondario); font-size: 0.82rem; }
.nomefile-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

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

/* Pannello CHIUSO: sparisce del tutto. Senza questa riga il nome del settore
   compariva DUE volte — una nel riquadro e una nella riga del pannello chiuso
   sotto — cioe' proprio il doppione che la griglia doveva togliere.
   Ora: si guardano i riquadri, se ne tocca uno, e sotto compare quel pannello
   e basta. */
.imp-sez-collassabile:not(.aperta) { display: none; }

/* ---- Sezioni Impostazioni studio COLLASSABILI (accordion) ---- */
.imp-sez-collassabile > h3.imp-sez-titolo {
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-sm);
}
.imp-sez-collassabile > h3.imp-sez-titolo::after {
  content: '\203A'; /* › */
  font-size: 1.5rem;
  line-height: 1;
  color: var(--colore-testo-secondario);
  transition: transform .15s ease;
}
.imp-sez-collassabile.aperta > h3.imp-sez-titolo::after { transform: rotate(90deg); }
.imp-sez-corpo {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .2s ease, opacity .2s ease, margin-top .2s ease;
}
.imp-sez-collassabile.aperta > .imp-sez-corpo {
  max-height: 4000px;
  opacity: 1;
  margin-top: var(--spazio-md);
}

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

/* Titoletto di gruppo nel cruscotto moduli (Base/Pro) */
.moduli-gruppo-titolo {
  margin: var(--spazio-md) 0 2px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--colore-testo-secondario, #6c7682);
}
.moduli-gruppo-titolo:first-child { margin-top: 0; }

/* Azioni di riga nella gestione Unità operative */
.unita-azioni { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 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.25rem; margin: 0 0 4px; }
.stampa-sub { font-size: 0.8rem; color: #555; margin: 0 0 12px; }
/* Firma discreta "Creato con PeritoMap" in fondo alle stampe (solo PDF/stampa). */
.stampa-firma-pm { margin: 18px 0 0; text-align: center; font-size: 0.72rem; color: #9aa0a6; }

/* Novità della versione (sezione a tutta pagina) */
.novita-versione {
  display: inline-block;
  background: var(--colore-primario, #1a73e8);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 6px;
  vertical-align: middle;
}
.novita-blocco { padding: 12px 0; border-bottom: 1px solid var(--colore-bordo, #ececec); }
.novita-blocco:last-child { border-bottom: none; }
.novita-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.novita-titolo { font-weight: 700; font-size: 1.02rem; }
.novita-data { font-size: 0.74rem; color: var(--colore-testo-secondario, #888); }
.novita-righe { margin: 8px 0 0; padding-left: 20px; }
.novita-righe li { margin: 4px 0; font-size: 0.92rem; line-height: 1.4; }

/* MINIGUIDA: si stacca dall'elenco delle novita' perche' non e' una notizia,
   sono istruzioni — chi le cerca deve trovarle a colpo d'occhio. */
.novita-guida {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-left: 3px solid var(--colore-primario, #1a73e8);
  border-radius: 0 8px 8px 0;
  background: var(--colore-sfondo-alt, #f6f8fb);
}
.novita-guida-titolo {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 6px;
  color: var(--colore-primario, #1a73e8);
}
.novita-guida-passi { margin: 0; padding-left: 20px; }
.novita-guida-passi li { margin: 6px 0; font-size: 0.9rem; line-height: 1.45; }

.stampa-tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.3;
}

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

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

@media print {
  body > *:not(#area-stampa) { display: none !important; }
  #area-stampa { display: block !important; padding: 14px; color: #000; }
  #area-stampa .cron-voce::before { background: #000; }
  .stampa-titolo { font-size: 1.15rem; }
  .stampa-sub { font-size: 0.78rem; }
  .stampa-tabella { font-size: 10.5px; }
  .stampa-tabella th, .stampa-tabella td { padding: 3px 6px; }
  .stampa-tabella tr { page-break-inside: avoid; }
  /* Margini di pagina più contenuti = contenuto più grande sul foglio */
  @page { margin: 12mm; }
}

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

/* Voci "Messaggi" e "Promemoria" ROSSE finche' c'e' qualcosa da leggere/fare */
.menu-voce-messaggi.ha-non-lette,
.menu-voce-promemoria.ha-non-lette {
  color: #fff;
  background: #c0392b;
  border-radius: 10px;
  animation: pulsaMessaggi 1.4s ease-in-out infinite;
}
.menu-voce-messaggi.ha-non-lette .menu-voce-badge,
.menu-voce-promemoria.ha-non-lette .menu-voce-badge {
  background: #fff;
  color: #c0392b;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}
@keyframes pulsaMessaggi {
  0%, 100% { background: #c0392b; }
  50% { background: #e74c3c; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-voce-messaggi.ha-non-lette,
  .menu-voce-promemoria.ha-non-lette { animation: none; }
}

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

/* ===== Selettore province (bacheca: regione -> province) ===== */
.selprov { width: 100%; }
.selprov-riga { margin-bottom: 8px; }
.selprov-regione { width: 100%; max-width: 320px; }
.selprov-tutte {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.9rem; margin: 6px 0 8px;
}
.selprov-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 12px; margin-bottom: 8px;
}
.selprov-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.88rem; padding: 2px 0;
}
.selprov-scelte { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.selprov-vuoto { color: var(--colore-testo-secondario); font-size: 0.82rem; font-style: italic; }
.selprov-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #e8f0fe; color: #1a4fa0; font-size: 0.78rem; font-weight: 600;
  padding: 2px 4px 2px 10px; border-radius: 999px;
}
.selprov-x {
  border: none; background: none; color: #1a4fa0; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 4px; border-radius: 999px;
}
.selprov-x:hover { background: rgba(26,79,160,0.15); }
.impostazione-riga-colonna { flex-direction: column; align-items: stretch; }

/* === Tooltip "pulsanti parlanti" (solo PC con mouse) === */
.tooltip-pm {
  position: fixed;
  z-index: 13000;
  background: #1a2330;
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 7px 10px;
  border-radius: 6px;
  max-width: 260px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.tooltip-pm.visibile { opacity: 1; }

/* ---- Form "Dati studio" ---- */
.studio-form { display: block; }
.studio-form-sez {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--colore-primario);
  margin: var(--spazio-md) 0 var(--spazio-sm);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--colore-bordo-leggero);
}
.studio-form-sez:first-child { margin-top: 0; }
.studio-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spazio-sm) var(--spazio-md);
}
.studio-griglia .studio-col-2 { grid-column: span 2; }
@media (max-width: 560px) {
  .studio-griglia { grid-template-columns: 1fr 1fr; }
  .studio-griglia .studio-col-2 { grid-column: span 2; }
}
.studio-azioni {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spazio-md);
  position: sticky;
  bottom: 0;
  background: linear-gradient(transparent, var(--colore-sfondo) 40%);
  padding-top: var(--spazio-sm);
}

/* ============================================
   Gettoni — vista saldo + movimenti (lato studio)
   ============================================ */
.gettoni-saldo-box {
  background: var(--colore-sfondo-secondario);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo-grande);
  padding: var(--spazio-lg);
  text-align: center;
  margin-bottom: var(--spazio-lg);
}
.gettoni-saldo-box.gettoni-saldo-basso {
  border-color: var(--colore-avviso);
  background: var(--colore-avviso-chiaro);
}
.gettoni-saldo-numero {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--colore-primario);
}
.gettoni-saldo-label {
  font-size: 0.9rem;
  color: var(--colore-testo-secondario);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gettoni-saldo-avviso {
  margin-top: var(--spazio-sm);
  font-size: 0.9rem;
  color: var(--colore-avviso);
  font-weight: 600;
}
.gettoni-titolo {
  font-size: 1rem;
  margin: var(--spazio-md) 0 var(--spazio-sm);
}
.gettoni-movimenti {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gettoni-mov {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spazio-md);
  padding: var(--spazio-sm) 0;
  border-bottom: 1px solid var(--colore-bordo-leggero);
}
.gettoni-mov-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gettoni-mov-tipo { font-weight: 600; }
.gettoni-mov-causale { font-size: 0.85rem; color: var(--colore-testo-secondario); }
.gettoni-mov-data { font-size: 0.8rem; color: var(--colore-testo-disabilitato); }
.gettoni-mov-valori { text-align: right; white-space: nowrap; }
.gettoni-mov-delta { display: block; font-weight: 700; }
.gettoni-mov-delta.gettoni-mov-pos { color: var(--colore-successo); }
.gettoni-mov-delta.gettoni-mov-neg { color: var(--colore-errore); }
.gettoni-mov-saldo { font-size: 0.8rem; color: var(--colore-testo-secondario); }

/* ============================================
   Migrazione massiva da CSV (P2)
   ============================================ */
.modale-largo { max-width: 640px; width: 96%; }
.migr-mappe { display: grid; gap: var(--spazio-xs); }
.migr-mappa-riga {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: var(--spazio-sm);
}
.migr-mappa-campo { font-weight: 600; font-size: 0.9rem; }
.migr-sel { width: 100%; }
.migr-anteprima-lista {
  margin: var(--spazio-xs) 0 0;
  padding-left: var(--spazio-lg);
  font-size: 0.85rem;
  color: var(--colore-testo-secondario);
}
@media (max-width: 520px) {
  .migr-mappa-riga { grid-template-columns: 1fr; gap: 2px; }
}

/* P4 #5 — badge "operatore inattivo" sulla scheda utente */
.utente-inattivo-badge {
  display: inline-block;
  margin-left: var(--spazio-sm);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--colore-avviso);
  background: var(--colore-avviso-chiaro);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
}

/* P4 #3 — FAQ in-app (accordion nativi <details>) */
.faq-lista { display: flex; flex-direction: column; gap: var(--spazio-sm); }
.faq-voce {
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  background: var(--colore-sfondo-secondario);
  overflow: hidden;
}
.faq-voce > summary {
  cursor: pointer;
  padding: var(--spazio-md);
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: calc(var(--spazio-md) * 2 + 8px);
}
.faq-voce > summary::-webkit-details-marker { display: none; }
.faq-voce > summary::after {
  content: '+';
  position: absolute;
  right: var(--spazio-md);
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--colore-primario);
}
.faq-voce[open] > summary::after { content: '\2013'; }
.faq-voce > p {
  margin: 0;
  padding: 0 var(--spazio-md) var(--spazio-md);
  color: var(--colore-testo-secondario);
  line-height: 1.55;
}

/* Picker scelta messaggio (mancato contatto) + editor modello di sistema */
.modello-scelta {
  display: block;
  width: 100%;
  margin-bottom: var(--spazio-sm);
  text-align: left;
}

/* ============================================
   CONVENZIONE "SERVIZIO A PAGAMENTO" — accento ORO
   Da usare su pulsanti e note delle funzioni che hanno un costo vivo
   (rassegna stampa, e in futuro altre). L'oro = "premium / costa".
   ============================================ */
.btn-oro {
  background: linear-gradient(180deg, #e6c34a 0%, #c9a227 100%);
  color: #3d2f00;
  border: 1px solid #b8860b;
  font-weight: 700;
}
.btn-oro:hover { filter: brightness(1.05); }
.btn-oro:active { filter: brightness(0.96); }

/* ---- Interruttore "costi e spese" (Massimo, 28/7) ----
   Quando il <body> porta la classe .senza-costi, sparisce dalla vista TUTTO
   cio' che ricorda una spesa: gli elementi marcati .solo-costi (voci statiche
   come la card CONTO o la domanda delle FAQ) e ogni nota di costo generata dai
   moduli (.nota-costo). La classe la mette app.js leggendo Auth.vedeCosti():
   nulla e' stato eliminato, si riaccende togliendo l'interruttore in auth.js. */
body.senza-costi .solo-costi,
body.senza-costi .nota-costo { display: none !important; }

.nota-costo {
  margin: 6px 0 4px;
  padding: 7px 11px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #6b5300;
  background: #fdf6e0;
  border: 1px solid #e6cf85;
  border-left: 3px solid #c9a227;
  border-radius: 8px;
}
.nota-costo strong { color: #7a5b00; }

/* Badge "Gratis" (verde) — complementare all'oro dei servizi a pagamento */
.badge-gratis {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1e7e45;
  background: #e8f6ee;
  border: 1px solid #b7e0c6;
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 6px;
  white-space: nowrap;
}

/* Badge "a pagamento" (oro), gemello di badge-gratis */
.badge-oro {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #8a5a00;
  background: #fdf3dd;
  border: 1px solid #e8cf95;
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 6px;
  white-space: nowrap;
}

/* Blocchi del pannello meteo: separazione netta GRATIS vs A PAGAMENTO */
.meteo-blocco {
  border: 1px solid var(--colore-bordo, #dde3ec);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.meteo-blocco-gratis { border-left: 5px solid #1e7e45; background: #f6fbf8; }
.meteo-blocco-pagamento { border-left: 5px solid #c99a2e; background: #fffdf7; }
.meteo-blocco-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #2c3542;
  margin-bottom: 10px;
}

/* === Studio in SOLA LETTURA (moroso/sospeso) === */
/* Banner fisso in alto: l'utente puo' consultare ma non modificare. */
.banner-sola-lettura {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4000;
  background: var(--colore-errore, #d93025);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.35;
  padding: 8px 14px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
/* Con il banner presente, scosta l'interfaccia per non coprirla. */
body.sola-lettura { padding-top: 46px; }
/* Disattiva visivamente i comandi di CREAZIONE/scrittura piu' evidenti (il
   blocco vero e' server-side). Colpisce i bottoni "+" e le azioni marcate
   data-scrittura, senza toccare la navigazione o i comandi di sola lettura. */
body.sola-lettura [data-scrittura],
body.sola-lettura .fab-nuovo-incarico,
body.sola-lettura #btn-nuovo-incarico {
  opacity: .4 !important;
  pointer-events: none !important;
  filter: grayscale(0.6);
}

/* ---- Selettore nazione nella barra in alto (29/7) ----
   Si sceglie la NAZIONE, non la lingua: la nazione decide sia la lingua sia i
   termini del mestiere (in Spagna "perito", in Messico "ajustador"). */
.topbar-btn-paese { font-size: 1.25rem; line-height: 1; }
.topbar-bandiera { font-size: 1.35rem; }

.scelta-paese-fondo {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: flex-end; justify-content: center;
}
.scelta-paese-foglio {
  background: var(--colore-superficie, #fff);
  width: 100%; max-width: 480px;
  border-radius: 16px 16px 0 0;
  padding: var(--spazio-md, 16px);
  max-height: 80vh; overflow-y: auto;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .25);
}
.scelta-paese-titolo { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.scelta-paese-nota {
  font-size: .85rem; opacity: .75; margin-bottom: var(--spazio-md, 16px); line-height: 1.35;
}
.scelta-paese-voce {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 12px; margin-bottom: 6px;
  border: 1px solid var(--colore-bordo, #e0e0e0); border-radius: 12px;
  background: transparent; cursor: pointer;
  font-size: 1rem; text-align: left; color: inherit;
  /* Bottoni grandi: si usa col telefono in mano, spesso all'aperto. */
  min-height: 52px;
}
.scelta-paese-voce.attiva {
  border-color: var(--colore-primario, #1976d2);
  background: rgba(25, 118, 210, .07);
  font-weight: 600;
}
.scelta-paese-bandiera { font-size: 1.6rem; line-height: 1; }
.scelta-paese-nome { flex: 1; }
.scelta-paese-spunta { color: var(--colore-primario, #1976d2); font-weight: 700; }