/* Guardian — design system (05_DESIGN_SYSTEM.md)
   Legibilidade primeiro: texto grande, contraste alto, alvos de toque amplos. */

:root {
  --bg: #f3f6fb;
  --surface: #ffffff;
  --text: #16233f;
  --muted: #5a6a85;
  --line: #e2e8f2;
  --primary: #2d6cdf;
  --primary-press: #235ac1;
  --success: #1f9d55;
  --success-press: #188046;
  --warning: #e8930c;
  --danger: #d9494f;
  --chip-ready: #e2f5ea;
  --chip-warning: #fdf0d8;
  --chip-attention: #fbe3e4;
  --shadow: 0 10px 30px rgba(22, 35, 63, 0.08);
  --radius: 16px;
  --space: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1626;
    --surface: #1a2336;
    --text: #eef2f9;
    --muted: #9aa8c0;
    --line: #2a3650;
    --chip-ready: #133524;
    --chip-warning: #3a2c0d;
    --chip-attention: #3d1a1c;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1.45;
  min-height: 100dvh;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: max(env(safe-area-inset-top), 16px) 20px calc(env(safe-area-inset-bottom) + 24px);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

button { font: inherit; color: inherit; }

/* ─── cabeçalho ─────────────────────────────────────────────── */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 4px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  font-size: 17px;
}

.brand img { width: 30px; height: 30px; border-radius: 8px; }

.brand small {
  display: block;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--muted);
  font-size: 13px;
}

.iconbtn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 48px;
  height: 48px;
  font-size: 22px;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.back {
  background: none;
  border: 0;
  color: var(--primary);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  padding: 12px 0;
}

h1.page { font-size: 26px; margin: 4px 0 16px; }

/* ─── ecrã principal ────────────────────────────────────────── */

.home-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 0;
}

.ring {
  width: 232px;
  height: 232px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--surface);
  border: 10px solid var(--success);
  box-shadow: var(--shadow);
  text-align: center;
  padding: 20px;
  transition: border-color 0.4s ease;
}

.ring .big { font-size: 44px; line-height: 1; }
.ring .state { font-size: 21px; font-weight: 700; }
.ring .sub { font-size: 15px; color: var(--muted); }

.ring.due { border-color: var(--primary); }
.ring.off { border-color: var(--muted); opacity: .85; }
.ring.reminder, .ring.grace { border-color: var(--warning); }
.ring.overdue { border-color: var(--danger); }

.checkin-btn {
  width: 100%;
  border: 0;
  border-radius: 22px;
  padding: 22px;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  background: var(--success);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.1s ease, background 0.2s ease;
}

.checkin-btn:active { transform: scale(0.98); background: var(--success-press); }
.checkin-btn.done { background: var(--surface); color: var(--success); border: 2px solid var(--success); }
.checkin-btn.pulse { animation: pulse 1.6s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.45); }
  50% { box-shadow: 0 0 0 16px rgba(31, 157, 85, 0); }
}

.times {
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px 20px;
}

.times .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  gap: 12px;
}

.times .row + .row { border-top: 1px solid var(--line); }
.times .label { color: var(--muted); font-size: 16px; }
.times .value { font-weight: 700; font-size: 19px; text-align: right; }

/* ─── safety status ─────────────────────────────────────────── */

.safety {
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  padding: 15px 20px;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: var(--chip-ready);
  color: var(--text);
}

.safety.warning { background: var(--chip-warning); }
.safety.attention { background: var(--chip-attention); }
.safety .hint { font-weight: 500; font-size: 15px; color: var(--muted); }

.issues { width: 100%; display: grid; gap: 10px; }

.issue {
  background: var(--surface);
  border-left: 6px solid var(--warning);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}

.issue.attention { border-left-color: var(--danger); }
.issue .t { font-weight: 700; margin-bottom: 2px; }
.issue .f { color: var(--muted); font-size: 16px; }

/* ─── navegação inferior ────────────────────────────────────── */

.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding-top: 18px;
}

.footer-nav button {
  background: none;
  border: 0;
  border-radius: 14px;
  padding: 10px 4px;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  gap: 2px;
  justify-items: center;
}

.footer-nav .ico { font-size: 24px; }

/* ─── cartões e formulários ─────────────────────────────────── */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}

.card h2 { font-size: 17px; color: var(--muted); font-weight: 700; margin-bottom: 12px; letter-spacing: 0.02em; }

label.field { display: block; margin-bottom: 14px; }
label.field span { display: block; font-size: 15px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }

input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 19px;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
}

input:focus, select:focus, textarea:focus { outline: 3px solid rgba(45, 108, 223, 0.35); border-color: var(--primary); }
textarea { min-height: 96px; resize: vertical; }

.btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 16px;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
}

.btn:active { background: var(--primary-press); }
.btn.secondary { background: var(--surface); color: var(--primary); border: 2px solid var(--primary); }
.btn.ghost { background: none; color: var(--muted); border: 0; font-weight: 600; }
.btn.danger { background: var(--surface); color: var(--danger); border: 2px solid var(--danger); }
.btn.success { background: var(--success); }
.btn + .btn { margin-top: 10px; }
.btn:disabled { opacity: 0.55; cursor: default; }

.inline { display: flex; gap: 10px; }
.inline > * { flex: 1; }

/* ─── contactos ─────────────────────────────────────────────── */

.contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}

.contact + .contact { border-top: 1px solid var(--line); }
.contact .who { flex: 1; min-width: 0; }
.contact .who .n { font-weight: 700; }
.contact .who .d { color: var(--muted); font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.contact .prio {
  background: var(--bg);
  border-radius: 999px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px;
  flex-shrink: 0;
}
.contact .actions { display: flex; gap: 6px; }
.contact .actions button {
  background: var(--bg);
  border: 0;
  border-radius: 10px;
  width: 42px; height: 42px;
  font-size: 18px;
  cursor: pointer;
}

/* ─── onboarding ────────────────────────────────────────────── */

.steps { display: flex; gap: 8px; margin: 12px 0 20px; }
.steps .dot { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.steps .dot.on { background: var(--primary); }

.hero { text-align: center; margin: 28px 0 20px; }
.hero img { width: 84px; height: 84px; border-radius: 22px; margin-bottom: 14px; }
.hero img.brandmark {
  width: min(250px, 70vw);
  height: auto;
  background: #fff;
  border-radius: 22px;
  padding: 6px 16px;
  box-shadow: var(--shadow);
}
.hero h1 { font-size: 30px; letter-spacing: 0.14em; }
.hero p { color: var(--muted); font-size: 17px; margin-top: 6px; }

/* ─── histórico ─────────────────────────────────────────────── */

.day {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}
.day + .day { border-top: 1px solid var(--line); }
.day .ok { color: var(--success); font-weight: 700; }
.day .miss { color: var(--danger); font-weight: 700; }
.day .off { color: var(--muted); }

/* ─── viagem ────────────────────────────────────────────────── */

.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.presets button {
  border: 2px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  padding: 18px 8px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}
.presets button.sel { border-color: var(--primary); color: var(--primary); background: rgba(45, 108, 223, 0.06); }

.travel-count { text-align: center; padding: 26px 0 10px; }
.travel-count .t { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; }
.travel-count .l { color: var(--muted); }

/* ─── toast ─────────────────────────────────────────────────── */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 28px);
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--bg);
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: min(92vw, 440px);
  text-align: center;
  z-index: 50;
}

#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.muted { color: var(--muted); font-size: 15px; }
.spacer { height: 8px; }

/* ─── banner de atualização ─────────────────────────────────── */

/* Seletor de idioma no topo do onboarding: EN | PT | ES | FR. */
.lang-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 4px;
}

.lang-bar button {
  border: 1px solid var(--primary);
  background: none;
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.lang-bar button.on {
  background: var(--primary);
  color: #fff;
}

/* Atualização obrigatória (canal Play): cobre tudo, sem forma de fechar. */
#forced-update {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg, #0e1c33);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 32px;
}

#forced-update img {
  width: 96px;
  height: 96px;
}

#forced-update h2 {
  font-size: 22px;
  color: var(--text);
}

#forced-update p {
  color: var(--muted);
  max-width: 420px;
  line-height: 1.5;
}

#forced-update button {
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  padding: 16px 28px;
  cursor: pointer;
}

#update-banner {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 12px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--text);
  color: var(--bg);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--shadow);
  z-index: 60;
  max-width: min(94vw, 460px);
}

#update-banner button {
  border: 0;
  border-radius: 999px;
  background: var(--success);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  padding: 8px 16px;
  cursor: pointer;
}

/* Push recebido com a app aberta (nativo): alerta dentro do ecrã,
   persistente até ser tocado — um alerta nunca pode ser invisível. */
#push-banner {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 12px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--danger);
  color: #fff;
  padding: 14px 20px;
  border-radius: 16px;
  font-size: 15px;
  box-shadow: var(--shadow);
  z-index: 70;
  width: min(94vw, 460px);
  cursor: pointer;
}

#push-banner strong {
  font-size: 16px;
}

/* ─── SOS ─────────────────────────────────────────────────────── */

.sos-btn {
  border: 2px solid var(--danger);
  background: none;
  color: var(--danger);
  font-weight: 800;
  font-size: 16px;
  padding: 10px 26px;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 10px;
}

.sos-active {
  background: var(--danger);
  color: #fff;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  width: 100%;
  max-width: 420px;
}

.sos-active .t {
  font-weight: 800;
  margin-bottom: 10px;
}

.sos-active .btn {
  background: #fff;
  color: var(--danger);
}

#sos-overlay {
  position: fixed;
  inset: 0;
  background: rgba(140, 20, 20, 0.97);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #fff;
  text-align: center;
  padding: 24px;
}

#sos-overlay .sos-title {
  font-size: 22px;
  font-weight: 700;
}

#sos-overlay .sos-count {
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
}

#sos-overlay .sos-cancel {
  margin-top: 16px;
  width: min(80vw, 340px);
  padding: 20px;
  font-size: 22px;
  font-weight: 800;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #8c1414;
  cursor: pointer;
}

/* Navbar inferior — navegação fixa nos ecrãs principais. */
#navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #fff;
  border-top: 1px solid rgba(27, 42, 65, 0.1);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 50;
}

#navbar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 0;
  background: none;
  padding: 10px 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

#navbar button span {
  font-size: 20px;
  line-height: 1;
}

#navbar button.active {
  color: var(--primary);
}

body.has-navbar #app {
  padding-bottom: 96px;
}

/* ─── Ecrã Premium (loja) ────────────────────────────────────── */
.prem { padding-bottom: 24px; }
.prem-hero { text-align: center; padding: 14px 8px 22px; }
.prem-heart {
  font-size: 46px; line-height: 1;
  filter: drop-shadow(0 8px 16px rgba(45, 108, 223, 0.35));
  animation: heartbeat 2.6s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 30%, 100% { transform: scale(1); }
  10% { transform: scale(1.18); }
  20% { transform: scale(1.1); }
}
.prem-title { font-size: 27px; font-weight: 800; margin: 12px 0 6px; }
.prem-pitch { font-size: 17px; font-weight: 700; color: var(--primary); margin: 0 0 10px; }
.prem-sub { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 32ch; margin: 0 auto; }

.prem-benefits { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 24px; }
.prem-benefit {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow);
}
.prem-benefit-icon {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center; font-size: 21px;
  border-radius: 12px; background: rgba(45, 108, 223, 0.10);
}
.prem-benefit-text { font-size: 15px; font-weight: 600; line-height: 1.35; }

.prem-plans { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.prem-plan {
  position: relative; border-radius: 18px; padding: 20px 18px 16px;
  background: var(--surface); border: 1px solid var(--line); text-align: center;
}
.prem-plan.annual {
  border: 2px solid var(--primary);
  box-shadow: 0 16px 38px rgba(45, 108, 223, 0.22);
}
.prem-plan.monthly { opacity: 0.9; }
.prem-plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 0.03em;
  padding: 6px 15px; border-radius: 999px;
  box-shadow: 0 8px 18px rgba(45, 108, 223, 0.42);
}
.prem-plan-name {
  font-size: 13px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px;
}
.prem-plan.annual .prem-plan-name { color: var(--primary); }
.prem-plan-price { font-size: 31px; font-weight: 800; margin: 3px 0; }
.prem-plan.monthly .prem-plan-price { font-size: 25px; }
.prem-plan-per { font-size: 14px; color: var(--success); font-weight: 700; margin-bottom: 12px; }
.prem-cta { width: 100%; margin-top: 10px; }

.prem-reassure { text-align: center; color: var(--muted); font-size: 13px; margin: 20px 0 12px; line-height: 1.45; }
.prem-mission {
  text-align: center; font-size: 15px; font-weight: 600; line-height: 1.55;
  color: var(--text); background: rgba(45, 108, 223, 0.06);
  border-radius: 14px; padding: 18px; margin-top: 8px;
}
.prem-soon {
  text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5;
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: 14px; padding: 16px; margin-top: 4px;
}

/* Mapa ao vivo do SOS (v2.24) — Leaflet embebido no painel do protetor. */
.sosmap {
  height: 240px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin: 4px 0;
  background: #e8eef5;
}
.sosmap-pin {
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sosmap-child { font-size: 26px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
.sosmap-me { font-size: 18px; }
.leaflet-container { font: inherit; }