/* ============================================================
   GOAL — design system condiviso (goal-theme.css)
   Gruppo Ostetrici Associati Laziali

   Uso: base per ogni nuova app/PDTA del progetto GOAL, in modo che
   tutti gli strumenti condividano lo stesso volto della rete.
   - Se l'app vive nella stessa cartella del sito: <link rel="stylesheet" href="goal-theme.css">
   - Se l'app deve restare autoconsistente (single-file): copiare qui sotto
     i token e i componenti necessari, senza alterarne i valori.

   Non contiene marchi, loghi o riferimenti a strutture: l'unico marchio
   ammesso nelle app è "GOAL". Il logo (pallone monocromo, SVG inline) vive
   nell'header di index.html — va copiato verbatim da lì quando serve,
   perché un file .css non può incorporare un elemento <svg>.

   Regola di leggibilità clinica: nessun testo sotto la dimensione di
   --fs-base (mai sotto 16px). Non introdurre font-size più piccoli di
   1rem in nessun componente: la gerarchia si ottiene con peso, colore,
   maiuscolo/spaziatura — mai rimpicciolendo il testo.
   ============================================================ */

:root{
  /* ---- token cromatici, identici a index.html ---- */
  --ink:#12222e;
  --deep:#123a5c;
  --deep-2:#1c5480;
  --line:#c9d6df;
  --paper:#f6f8fa;
  --paper-2:#eef2f5;
  --claret:#7a2e22;        /* accento raro: usarlo solo per stati bloccanti o micro-accenti */
  --claret-bright:#a3402f;
  --white:#ffffff;
  --muted:#5c6f7c;

  /* ---- token clinici aggiuntivi (alert di cautela / informativi) ---- */
  --caution-bg:#fdf3de;
  --caution-border:#c98a1c;
  --caution-text:#6b4a10;
  --info-bg:var(--paper-2);
  --info-border:var(--deep-2);

  /* ---- forma e misura ---- */
  --radius:14px;
  --maxw:1180px;

  /* ---- tipografia: mai sotto 16px, line-height arieggiato ---- */
  --font:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --fs-base:16.5px;
  --lh-base:1.6;
}

@media(max-width:768px){
  :root{ --fs-base:16px; }
}

/* ---------- RESET DI BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--fs-base)}
body{
  font-family:var(--font);
  font-size:1rem;
  line-height:var(--lh-base);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--deep-2);outline-offset:2px}

/* ---------- CONTENITORE ---------- */
.goal-wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}

/* ---------- APPBAR (fascia blu, solo marchio GOAL) ---------- */
.goal-appbar{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(135deg,var(--deep),var(--deep-2));
  color:var(--white);
  padding:.9rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.goal-appbar-brand{display:flex;align-items:center;gap:.7rem;font-weight:800;letter-spacing:.02em;font-size:1.2rem}
.goal-appbar-mark{width:34px;height:34px;flex:none} /* qui va copiato il mark SVG di index.html */
.goal-appbar-title{font-weight:700;color:#fff;font-size:1.35rem}
.goal-appbar-meta{font-size:1rem;color:rgba(255,255,255,.75)}

/* ---------- CARD / STEP ---------- */
.goal-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem;
  box-shadow:0 10px 28px rgba(18,58,92,.06);
}
.goal-step{ }
.goal-step-head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  margin-bottom:1.3rem;padding-bottom:1rem;border-bottom:1px solid var(--line);
}
.goal-step-eyebrow{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--claret);font-size:1rem}
.goal-step-dots{display:flex;gap:.5rem;align-items:center}
.goal-step-dot{width:10px;height:10px;border-radius:50%;background:var(--line)}
.goal-step-dot.done{background:var(--deep-2)}
.goal-step-dot.current{background:var(--deep);box-shadow:0 0 0 4px rgba(18,58,92,.15)}

/* ---------- CAMPI FORM ---------- */
.goal-field{margin-bottom:1.1rem}
.goal-field label{display:block;font-weight:600;font-size:1rem;margin-bottom:.4rem;color:var(--ink)}
.goal-field input,
.goal-field select,
.goal-field textarea{
  width:100%;font:inherit;font-size:1rem;
  padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;
  background:var(--white);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.goal-field input:focus,
.goal-field select:focus,
.goal-field textarea:focus{
  border-color:var(--deep-2);box-shadow:0 0 0 3px rgba(28,84,128,.12);outline:none;
}
.goal-field .goal-hint{display:block;margin-top:.35rem;color:var(--muted);font-size:1rem}

/* ---------- CARD-SCELTA (checkbox/radio cliccabili) ---------- */
.goal-choice{
  display:flex;align-items:center;gap:.8rem;
  padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:10px;
  cursor:pointer;transition:border-color .15s,background .15s;
}
.goal-choice:hover{border-color:var(--deep-2)}
.goal-choice.selected{border-color:var(--deep);background:rgba(18,58,92,.05)}
.goal-choice input{width:18px;height:18px;flex:none;accent-color:var(--deep)}
.goal-choice-label{font-size:1rem;font-weight:600;color:var(--ink)}
.goal-choice-hint{font-size:1rem;color:var(--muted)}

/* ---------- BOTTONI ---------- */
.goal-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-size:1rem;font-weight:700;
  padding:.85rem 1.5rem;border-radius:10px;border:none;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s,border-color .15s,color .15s;
}
.goal-btn-primary{background:var(--deep);color:var(--white)}
.goal-btn-primary:hover{background:var(--deep-2);transform:translateY(-1px)}
.goal-btn-ghost{background:transparent;color:var(--deep);border:1px solid var(--line)}
.goal-btn-ghost:hover{border-color:var(--deep-2);color:var(--deep-2)}
.goal-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- ALERT CLINICI (3 varianti sobrie) ---------- */
.goal-alert{
  border-radius:10px;padding:1rem 1.2rem;font-size:1rem;line-height:var(--lh-base);
  display:flex;gap:.8rem;align-items:flex-start;border-left:4px solid transparent;
}
.goal-alert strong{display:block;margin-bottom:.25rem}

/* bloccante: condizione ostativa, ferma il percorso */
.goal-alert-block{background:var(--claret);color:var(--white);border-left-color:var(--claret-bright)}

/* cautela: non ferma il percorso, richiede attenzione */
.goal-alert-caution{background:var(--caution-bg);color:var(--caution-text);border-left-color:var(--caution-border)}

/* informativo: nota di contesto, nessun rischio */
.goal-alert-info{background:var(--info-bg);color:var(--ink);border-left-color:var(--info-border)}

/* ---------- FONTE CITATA ---------- */
.goal-source{display:block;margin-top:.5rem;font-style:italic;color:var(--muted);font-size:1rem}

/* ---------- DISCLAIMER STANDARD ---------- */
.goal-disclaimer{
  margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:1rem;color:var(--muted);line-height:var(--lh-base);
}
/* testo di riferimento già approvato per il sito, da riusare invariato:
   "Non sostituisce il giudizio clinico né i protocolli aziendali.
    Nessun dato della paziente lascia il dispositivo." */

/* ---------- FOOTER (firma senza nomi di struttura) ---------- */
.goal-footer{
  padding:2rem 1.5rem;border-top:1px solid var(--line);
  text-align:center;color:var(--muted);font-size:1rem;
}
.goal-footer strong{color:var(--claret)}

/* ---------- ACCESSIBILITÀ ---------- */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- BREAKPOINT ---------- */
@media(max-width:768px){
  .goal-appbar{flex-direction:column;align-items:flex-start;gap:.6rem}
  .goal-step-head{flex-direction:column;align-items:flex-start}
  .goal-card{padding:1.2rem}
  .goal-wrap{padding:0 1.1rem}
}