/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Palette ControlGo
   Brand: ControlGo (ex ServiGO)
   Tone of voice: Professionale, asciutto, orientato all'efficienza.
   Target: Periti, assicurati, professionisti del settore automotive.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Palette ControlGo (ufficiale) ───────────────────────── */
  --cg-petrol:        #0B5D66;  /* Primary — header, pulsanti strutturali, icone stato attivo */
  --cg-petrol-dark:   #084850;  /* hover / pressed state */
  --cg-petrol-tint:   #E6F1F2;  /* background tintato leggero */
  --cg-petrol-mid:    #B8D4D7;  /* bordi e separatori coerenti */

  --cg-cyan:          #00D1C1;  /* Secondary — progress bar, feedback successo, accenti */
  --cg-cyan-dark:     #00A89C;  /* progress fill scuro, hover */

  --cg-gold:          #FFB800;  /* Accent — CTA principali (es. SCATTA FOTO), alert */
  --cg-gold-dark:     #E5A600;  /* hover state CTA primario */
  --cg-gold-tint:     #FFF4D6;  /* sfondo evidenza mandatoria */

  --cg-slate:         #1E293B;  /* Text/Dark — testi, titoli, bordi delle card */
  --cg-slate-soft:    #475569;  /* testo secondario */
  --cg-slate-mute:    #64748B;  /* metadati, label */

  --cg-cloud:         #F8FAFC;  /* Neutral — sfondi schermate (non bianco puro) */
  --cg-cloud-2:       #F1F5F9;  /* sfondi card / placeholder */
  --cg-border:        #E2E8F0;  /* bordi card / divisori */

  --cg-coral:         #E11D48;  /* Error — bordo rosso corallo stato errore */
  --cg-coral-tint:    #FEE2E6;
  --cg-amber:         #F59E0B;  /* Warning */
  --cg-white:         #FFFFFF;

  /* ── Alias legacy ServiGO → ControlGo ─────────────────────
     Manteniamo i nomi `--sg-*` esistenti remappati ai nuovi colori
     così tutto il CSS esistente eredita il rebrand senza tocchi puntuali. */
  --sg-green:       var(--cg-petrol);
  --sg-green-dark:  var(--cg-petrol-dark);
  --sg-green-light: var(--cg-petrol-tint);
  --sg-green-mid:   var(--cg-petrol-mid);
  --sg-blue:        var(--cg-cyan);
  --sg-blue-dark:   var(--cg-cyan-dark);
  --sg-black:       var(--cg-slate);
  --sg-gray:        var(--cg-slate-mute);
  --sg-gray-light:  var(--cg-cloud);
  --sg-white:       var(--cg-white);
  --sg-red:         var(--cg-coral);
  --sg-amber:       var(--cg-amber);

  /* ── Tipografia ────────────────────────────────────────────
     Inter / Public Sans — ottima leggibilità su schermi piccoli. */
  --font-display: 'Inter', 'Public Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* spacing & radius */
  --radius-sm:  6px;
  --radius-md:  8px;          /* default professionale: angoli più contenuti */
  --radius-lg:  14px;
  --radius-xl:  22px;

  /* transizioni */
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* ombre coerenti */
  --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-cta:  0 6px 18px rgba(255,184,0,0.30);
  --shadow-sticky: 0 -6px 20px rgba(15,23,42,0.06);
}

/* ═══════════════════════════════════════════════════════════════
   RESET BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  height: 100%;
  height: 100dvh;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body {
  font-family: var(--font-body);
  font-feature-settings: 'cv11','ss01','ss03';   /* glyph alternates Inter */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--cg-cloud);
  color: var(--cg-slate);
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Campi editabili: selezione/callout restano */
input, textarea, select, [contenteditable="true"], [contenteditable="plaintext-only"] {
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
}
.cid-a4, .cid-a4 *, .selectable, .selectable * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT PRINCIPALE
   ═══════════════════════════════════════════════════════════════ */
.screen {
  display: none;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  background: var(--cg-white);
  position: relative;
  animation: slideIn 0.3s ease;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.screen.active { display: flex; }

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

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FORCE-PORTRAIT OVERLAY (schermate non-camera)
   ═══════════════════════════════════════════════════════════════ */
#forcePortraitOverlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 9990;
  background: var(--cg-slate);
  color: #fff;
  align-items: center; justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 24px;
  user-select: none;
  -webkit-user-select: none;
}
#forcePortraitOverlay.visible { display: flex; }
.fp-icon {
  font-size: 72px;
  margin-bottom: 18px;
  display: inline-block;
  animation: fp-rock 1.6s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes fp-rock {
  0%, 100% { transform: rotate(-90deg); }
  45%, 55% { transform: rotate(0deg); }
}
.fp-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  margin-bottom: 8px;
}
.fp-sub {
  font-size: 14px; opacity: 0.8;
  max-width: 320px; line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
  .fp-icon { animation: none; transform: rotate(-90deg); }
}