/* SMAR - estilos
   tema escuro, letra grande e botões grandes (pensado para idosos) */

:root {
  --fundo: #111614;
  --sup: #1a201d;
  --sup2: #232a26;
  --linha: #2f3833;
  --txt: #f1f3ee;
  --txt2: #b6beb5;
  --txt3: #848d85;

  --verde: #3fbf6f;
  --verde2: #2a8a4f;
  --verde-bg: #173523;
  --verm: #e04343;
  --verm2: #a82828;
  --verm-bg: #3b1716;
  --amar: #e9b949;
  --amar-bg: #3a3017;
  --link: #8fd3a8;

  --r: 12px;
  --toque: 60px;
  --lado: 16px;
  --topo-seg: env(safe-area-inset-top, 0px);
  --baixo-seg: env(safe-area-inset-bottom, 0px);

  font-size: 20px;
}
html[data-fonte="normal"] { font-size: 18px; }
html[data-fonte="grande"] { font-size: 20px; }
html[data-fonte="extra"] { font-size: 24px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fundo);
  color: var(--txt);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { flex: none; display: block; }

.tela {
  max-width: 540px;
  margin: 0 auto;
  padding: calc(var(--topo-seg) + 14px) var(--lado) calc(var(--baixo-seg) + 112px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* topo */
.topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.topo .saud { color: var(--txt2); font-size: .9rem; }
.topo h1 { font-size: 1.6rem; font-weight: 700; }
.topo .hora { text-align: right; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.topo .hora small { display: block; font-size: .7rem; font-weight: 400; color: var(--txt3); }
.titulo { font-size: 1.5rem; font-weight: 700; }
.sub { color: var(--txt2); font-size: .9rem; }
.peq { font-size: .8rem; color: var(--txt3); }

/* status */
.status {
  border-radius: var(--r);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
}
.status b { display: block; font-size: 1.15rem; }
.status span { font-size: .85rem; }
.status .ponto { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.status.ligado { background: var(--verde-bg); border-left: 6px solid var(--verde); }
.status.ligado .ponto { background: var(--verde); }
.status.ligado span { color: #a9dcbb; }
.status.desligado { background: var(--sup); border-left: 6px solid var(--amar); }
.status.desligado .ponto { background: var(--amar); }
.status.desligado span { color: var(--txt2); }

/* botões */
.btn {
  min-height: var(--toque);
  border-radius: var(--r);
  border: 2px solid transparent;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
  text-decoration: none;
  user-select: none; -webkit-user-select: none;
}
.btn:active { opacity: .85; }
.btn:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: default; }
.largo { width: 100%; }
.b-verde { background: var(--verde); color: #0b2415; }
.b-verm { background: var(--verm); color: #fff; }
.b-amar { background: var(--amar); color: #2d2306; }
.b-cinza { background: var(--sup2); color: var(--txt); border-color: var(--linha); }
.b-borda { background: transparent; color: var(--txt); border-color: var(--linha); }
.b-perigo { background: transparent; color: #f19a9a; border-color: #5a2423; }
.b-grande { min-height: 80px; font-size: 1.2rem; }
.b-peq { min-height: 48px; padding: 6px 14px; font-size: .85rem; }
.b-link { background: none; border: 0; color: var(--link); font-weight: 600; font-size: .85rem; padding: 8px 4px; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

/* SOS */
.sos-area { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; }
.sos {
  width: min(62vw, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  background: var(--verm);
  box-shadow: 0 0 0 10px var(--verm-bg);
  color: #fff;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sos:active { background: var(--verm2); }
.sos:focus-visible { outline: 4px solid #fff; outline-offset: 14px; }
.sos b { font-size: 3.2rem; font-weight: 800; letter-spacing: .04em; line-height: 1; }
.sos span { font-size: .85rem; margin-top: 4px; }

/* grupos (listas estilo ajustes do celular) */
.grupo h2 { font-size: .95rem; font-weight: 600; color: var(--txt2); margin: 0 4px 8px; }
.grupo .caixa { background: var(--sup); border-radius: var(--r); overflow: hidden; }
.linha {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  min-height: 64px;
}
.caixa > .linha + .linha, .caixa > * + .linha, .caixa > .linha + * { border-top: 1px solid var(--linha); }
.linha .meio { flex: 1; min-width: 0; }
.linha .meio b { display: block; font-weight: 600; }
.linha .meio span { display: block; font-size: .8rem; color: var(--txt2); }
.linha .ic-caixa {
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--sup2); color: var(--txt2);
}
.ic-caixa.verm { background: var(--verm-bg); color: #f19a9a; }
.ic-caixa.verde { background: var(--verde-bg); color: var(--verde); }
.ic-caixa.amar { background: var(--amar-bg); color: var(--amar); }
.bloco { padding: 16px; }
.bloco + .bloco { border-top: 1px solid var(--linha); }

/* medidor de som */
.medidor { height: 16px; background: var(--sup2); border-radius: 8px; overflow: hidden; }
.medidor i { display: block; height: 100%; width: 0; background: var(--verde); border-radius: 8px; transition: width .08s linear; }
.medidor i.alto { background: var(--amar); }
.medidor i.muito { background: var(--verm); }
.leitura { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.leitura b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.leitura b small { font-size: .8rem; color: var(--txt2); font-weight: 500; }
.sensores { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: .85rem; color: var(--txt2); }
.sensores div { display: flex; align-items: center; gap: 8px; }
.sensores i { width: 10px; height: 10px; border-radius: 50%; background: var(--txt3); flex: none; }
.sensores .on i { background: var(--verde); }
.sensores .erro i { background: var(--amar); }

.testes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }

.resultado { font-size: .8rem; font-weight: 600; margin-top: 4px; display: block; }
.resultado.enviado { color: #f19a9a; }
.resultado.cancelado { color: #8fd3a8; }
.resultado.outro { color: var(--txt3); }

.vazio { text-align: center; color: var(--txt3); padding: 36px 12px; }

/* formulários */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-weight: 600; font-size: .9rem; }
.campo .dica { color: var(--txt3); font-size: .78rem; font-weight: 400; }
.entrada {
  min-height: var(--toque);
  border-radius: 10px;
  border: 2px solid var(--linha);
  background: var(--fundo);
  padding: 12px 14px;
  font-size: 1.05rem;
  width: 100%;
}
.entrada:focus { outline: none; border-color: var(--verde); }
textarea.entrada { min-height: 90px; resize: vertical; }
.erro { color: #f19a9a; font-size: .85rem; }
.form { display: flex; flex-direction: column; gap: 14px; padding: 16px; }

.opcoes { display: flex; gap: 8px; }
.opcoes button {
  flex: 1; min-height: 54px; border-radius: 10px; border: 2px solid var(--linha);
  background: var(--fundo); font-weight: 600; cursor: pointer; font-size: .9rem;
}
.opcoes button[aria-pressed="true"] { border-color: var(--verde); background: var(--verde-bg); color: #c9efd6; }

.chave { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; min-height: 64px; cursor: pointer; }
.chave .meio b { display: block; font-weight: 600; font-size: .95rem; }
.chave .meio span { display: block; font-size: .78rem; color: var(--txt2); }
.chave input { position: absolute; opacity: 0; pointer-events: none; }
.chave .trilho { width: 58px; height: 34px; border-radius: 17px; background: #3c4540; flex: none; position: relative; }
.chave .trilho::after { content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .15s; }
.chave input:checked + .trilho { background: var(--verde); }
.chave input:checked + .trilho::after { transform: translateX(24px); }
.chave input:focus-visible + .trilho { outline: 3px solid var(--link); outline-offset: 2px; }
.caixa > .chave + .chave, .caixa > .chave + .bloco, .caixa > .bloco + .chave { border-top: 1px solid var(--linha); }

/* aviso */
.aviso { border-radius: var(--r); padding: 12px 14px; font-size: .85rem; display: flex; gap: 10px; align-items: flex-start; background: var(--amar-bg); color: #f3e2b3; }
.aviso.verm { background: var(--verm-bg); color: #f6caca; }
.aviso .ico { margin-top: 1px; }
.aviso a, .aviso button.b-link { color: inherit; text-decoration: underline; padding: 0; min-height: 0; font-size: inherit; }

/* navegação */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--sup);
  border-top: 1px solid var(--linha);
  padding: 6px 8px calc(var(--baixo-seg) + 6px);
}
.nav ul { list-style: none; margin: 0 auto; padding: 0; display: flex; max-width: 540px; }
.nav li { flex: 1; }
.nav button {
  width: 100%; min-height: 62px; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--txt3); font-size: .72rem; font-weight: 600; cursor: pointer;
}
.nav button[aria-current="page"] { color: var(--verde); }

/* tela de alerta */
.alerta {
  position: fixed; inset: 0; z-index: 100;
  background: #5c1514;
  display: flex; flex-direction: column;
  padding: calc(var(--topo-seg) + 22px) var(--lado) calc(var(--baixo-seg) + 18px);
  overflow-y: auto;
}
.alerta.piscando { animation: piscar 1.2s steps(2, jump-none) infinite; }
@keyframes piscar { 0% { background: #5c1514; } 100% { background: #7a1b19; } }
.alerta.enviado { background: #2a1110; }
.alerta .cont { max-width: 500px; width: 100%; margin: 0 auto; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.alerta .tipo { text-align: center; font-size: .95rem; color: #ffd0cc; }
.alerta h1 { text-align: center; font-size: 2.1rem; font-weight: 800; }
.alerta .det { text-align: center; color: #ffd0cc; font-size: .95rem; }
.alerta .det a { color: #fff; }

.anel { position: relative; width: 190px; height: 190px; margin: 4px auto; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 12; }
.anel .f { stroke: rgba(255,255,255,.15); }
.anel .p { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.anel .n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anel .n b { font-size: 4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.anel .n span { font-size: .8rem; color: #ffd0cc; }

.envios { background: rgba(0,0,0,.25); border-radius: var(--r); }
.envio { padding: 14px; }
.envio + .envio { border-top: 1px solid rgba(255,255,255,.1); }
.envio .cab { display: flex; align-items: center; gap: 12px; }
.envio .est { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.12); }
.envio .est.ok { background: var(--verde); color: #0b2415; }
.envio .cab b { display: block; }
.envio .cab span { font-size: .8rem; color: #ffd0cc; }
.envio .acoes { display: flex; gap: 8px; margin-top: 10px; }
.envio .acoes .btn { flex: 1; padding: 6px 8px; }
.b-alerta { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.18); }
.girando { width: 16px; height: 16px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.msg { background: rgba(0,0,0,.3); border-radius: 10px; padding: 12px; font-size: .8rem; color: #ffe1de; white-space: pre-wrap; word-break: break-word; margin-top: 8px; }
.alerta details summary { cursor: pointer; color: #ffd0cc; font-size: .85rem; padding: 6px 0; }
.alerta .nota { text-align: center; font-size: .75rem; color: #e9a7a1; }

/* janela de confirmação */
.modal-fundo {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.65);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px 16px calc(var(--baixo-seg) + 16px);
}
.modal { background: var(--sup); border-radius: 16px; width: 100%; max-width: 500px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.modal h2 { font-size: 1.25rem; }
.modal p { color: var(--txt2); margin-bottom: 6px; }

/* toast */
#toast-root {
  position: fixed; left: 0; right: 0; bottom: calc(var(--baixo-seg) + 94px); z-index: 300;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px;
}
.toast { background: var(--txt); color: var(--fundo); font-weight: 600; font-size: .9rem; padding: 12px 18px; border-radius: 10px; max-width: 500px; }

/* cadastro */
.inicio-app { min-height: 100dvh; justify-content: center; gap: 26px; padding-bottom: calc(var(--baixo-seg) + 28px); }
.inicio-app .logo { width: 96px; height: 96px; border-radius: 22px; }
.inicio-app h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: .02em; }
.inicio-app p { color: var(--txt2); font-size: 1.05rem; }
.passo { color: var(--txt3); font-size: .85rem; }
.rodape { display: flex; gap: 10px; }
.rodape .btn { flex: 1; }

.sobre p { font-size: .85rem; color: var(--txt2); }
.sobre p + p { margin-top: 8px; }
.sobre b { color: var(--txt); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .alerta.piscando { animation: none; }
  .anel .p, .medidor i { transition: none; }
}