/* ============================================================================
 * SicurBas — Modulo "Rischio Maremoto" — stili
 * Prefisso .sbm- su tutto per non collidere con app.css.
 * I colori di zona sono quelli della tassonomia ufficiale del piano
 * (arancione = advisory, rossa = watch): non sono decorativi, non cambiarli.
 * ========================================================================== */

.sbm-body { --sbm-arancione:#E85D04; --sbm-rossa:#C1121F; --sbm-fuori:#05614B;
  --sbm-ignoto:#3A4750; --sbm-attesa:#0A1418; --sbm-linea:#D9D5CC;
  --sbm-grigio:#6B7780; }

.sbm-avvertenza {
  background:#FFF3CD; border-left:4px solid var(--sbm-arancione);
  padding:12px 14px; margin:0 0 16px; font-size:14px; line-height:1.45;
}

/* ------------------------------------------------------------- verdetto */
.sbm-verdetto {
  padding:22px 20px 24px; margin:0 -20px 20px; color:#fff;
  background:var(--sbm-attesa); transition:background .25s;
}
.sbm-verdetto[data-z="arancione"] { background:var(--sbm-arancione) }
.sbm-verdetto[data-z="rossa"]     { background:var(--sbm-rossa) }
.sbm-verdetto[data-z="fuori"]     { background:var(--sbm-fuori) }
.sbm-verdetto[data-z="ignoto"]    { background:var(--sbm-ignoto) }
.sbm-eyebrow {
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  opacity:.75; margin:0 0 8px;
}
.sbm-verdetto h2 {
  font-size:clamp(28px,8vw,42px); font-weight:900; line-height:.98;
  letter-spacing:-.03em; margin:0 0 10px;
}
.sbm-verdetto p { margin:0; font-size:15.5px; line-height:1.45; max-width:36ch; opacity:.95 }
.sbm-cta, .sbm-ghost {
  font:inherit; font-weight:800; margin-top:16px; padding:15px 18px;
  border-radius:2px; cursor:pointer; width:100%;
}
.sbm-cta { border:0; background:#fff; color:var(--sbm-attesa) }
.sbm-ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7) }
.sbm-cta:focus-visible, .sbm-ghost:focus-visible { outline:3px solid #fff; outline-offset:3px }

/* -------------------------------------------------------------- bussola */
.sbm-bussola { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:22px }
.sbm-quadrante {
  width:104px; height:104px; flex:0 0 104px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); display:grid; place-items:center; color:#fff;
}
.sbm-quadrante > div { width:100%; height:100%; transition:transform .18s linear; will-change:transform }
.sbm-quadrante svg { width:100%; height:100%; display:block }
.sbm-dest strong { font-size:40px; font-weight:900; letter-spacing:-.03em; line-height:1 }
.sbm-dest span { font-size:16px; font-weight:700; margin-left:5px }
.sbm-dest em { display:block; font-style:normal; font-size:14px; margin-top:5px; opacity:.9 }
.sbm-bussola .sbm-ghost { flex:1 1 100%; margin-top:6px }

/* --------------------------------------------------------- piano familiare */
.sbm-piano {
  padding:16px 18px; margin:0 0 20px; border-left:5px solid var(--sbm-grigio);
  background:#F5F4F1;
}
.sbm-piano[data-e="pericolo"] { border-color:var(--sbm-rossa); background:#FDECEE }
.sbm-piano[data-e="sospetto"] { border-color:var(--sbm-arancione); background:#FFF3CD }
.sbm-piano[data-e="ok"]       { border-color:var(--sbm-fuori); background:#EAF4F0 }
.sbm-piano h3 { margin:0 0 7px; font-size:17px; font-weight:800; letter-spacing:-.01em }
.sbm-piano p  { margin:0; font-size:15px; line-height:1.5 }
.sbm-alt { margin:12px 0 0; padding-left:18px; font-size:14.5px; line-height:1.6 }

/* ---------------------------------------------------------------- vie */
.sbm-vie h3, .sbm-op h3 {
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sbm-grigio); margin:24px 0 10px;
}
.sbm-via { padding:14px 0; border-bottom:1px solid var(--sbm-linea) }
.sbm-via:last-child { border-bottom:0 }
.sbm-via h3 { font-size:15px; font-weight:900; letter-spacing:-.01em;
  text-transform:none; color:inherit; margin:0 }
.sbm-via h3 span { font-weight:600; font-size:13px; color:var(--sbm-grigio); margin-left:8px }
.sbm-perc { margin:6px 0 0; font-size:15px; line-height:1.45 }
.sbm-tempo { margin:8px 0 0; font-size:14px; font-weight:700 }
.sbm-dest { margin:6px 0 0; padding-left:18px; font-size:14px; line-height:1.55 }
.sbm-crit { margin:8px 0 0; padding-left:18px; font-size:13.5px; font-weight:600;
  color:var(--sbm-rossa); line-height:1.5 }

/* ---------------------------------------------------- riservato operatori */
.sbm-op {
  margin-top:28px; padding:18px; border:2px dashed var(--sbm-grigio); border-radius:3px;
}
.sbm-op > h3:first-child::before { content:"🔒 "; }
.sbm-attivazione { font-size:14px; font-weight:700; margin:0 0 12px; line-height:1.5 }
.sbm-tab { width:100%; border-collapse:collapse; font-size:13.5px }
.sbm-tab th { text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sbm-grigio); padding:6px 8px 6px 0; border-bottom:1px solid var(--sbm-linea) }
.sbm-tab td { padding:9px 8px 9px 0; border-bottom:1px solid var(--sbm-linea);
  vertical-align:top }
.sbm-tab small { color:var(--sbm-grigio) }
.sbm-tag { display:inline-block; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; padding:3px 6px; border-radius:2px; margin-right:4px; color:#fff }
.sbm-tag[data-l="arancione"] { background:var(--sbm-arancione) }
.sbm-tag[data-l="rossa"]     { background:var(--sbm-rossa) }
.sbm-copia { font:inherit; font-size:13px; font-variant-numeric:tabular-nums;
  background:none; border:1px solid var(--sbm-linea); border-radius:2px;
  padding:5px 7px; cursor:pointer }
.sbm-strutture { margin:0; padding-left:18px; font-size:14.5px; line-height:1.6 }

.sbm-fonte { margin:26px 0 0; font-size:12.5px; color:var(--sbm-grigio); line-height:1.5 }

/* ------------------------------------- schermata di fallback (hook assente) */
.sbm-fallback-screen {
  position:fixed; inset:0; z-index:9999; overflow-y:auto;
  background:#FBFAF7; color:#0A1418;
  padding:env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 32px);
}
.sbm-fallback-screen header { display:flex; align-items:center; gap:12px; padding:14px 20px }
.sbm-fallback-screen header h1 { font-size:17px; font-weight:800; margin:0 }
.sbm-fallback-screen header button { font:inherit; font-weight:700; background:none;
  border:0; padding:6px 0; cursor:pointer }
.sbm-fallback-screen .sbm-body { padding:0 20px }

@media (prefers-reduced-motion:reduce) { .sbm-quadrante > div, .sbm-verdetto { transition:none } }

/* ------------------------- widget GPS punto di ritrovo (Piano Familiare) */
.sbm-piano-gps { margin: 8px 0 15px; }
.sbm-piano-gps-btn {
  font: inherit; font-size: 0.82rem; font-weight: 700; width: 100%;
  padding: 9px 10px; border-radius: 6px; border: 1px solid #0077b6;
  background: #eaf4fb; color: #023e8a; cursor: pointer;
}
.sbm-piano-gps-btn:disabled { opacity: 0.6; cursor: default; }
.sbm-piano-gps-hint { font-size: 0.72rem; color: #717171; margin-top: 4px; line-height: 1.4; }

/* Simulazione posizione (solo admin) */
.sbm-sim { margin:0 0 20px; padding:14px 16px; border:2px dashed var(--sbm-grigio); border-radius:3px }
.sbm-sim h3 { margin:0 0 10px; font-size:.95rem }
.sbm-sim-riga { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px }
.sbm-sim select, .sbm-sim input {
  flex:1 1 180px; padding:10px; border:1px solid var(--sbm-linea); border-radius:3px; font:inherit }
.sbm-sim .sbm-cta { background:var(--sbm-attesa); color:#fff }
.sbm-sim .sbm-ghost { color:var(--sbm-attesa); border-color:var(--sbm-attesa) }
.sbm-simulata {
  background:#FDECEE; border-left:5px solid var(--sbm-rossa); padding:10px 12px; margin:0 0 10px }