/* Defesa Civil - app de campo.
   Premissa de design: agente de luva, sob chuva, no escuro ou sob sol forte.
   Alvos de toque >= 56px, contraste alto, zero texto pequeno. */

:root {
  --laranja: #ff6b00;
  --laranja-claro: #ff8c33;
  --fundo: #0b0f14;
  --fundo-2: #131a22;
  --fundo-3: #1c2632;
  --borda: #2a3644;
  --texto: #f1f5f9;
  --texto-fraco: #93a3b5;
  --verde: #22c55e;
  --vermelho: #ef4444;
  --amarelo: #f59e0b;
  --azul: #3b82f6;
  --raio: 14px;
  --toque: 60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Qualquer `display` declarado depois vence o `hidden` do navegador — e o
   elemento continua na tela mesmo "escondido". Esta linha fecha isso. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  overscroll-behavior: none;
}

body { display: flex; flex-direction: column; }

/* ── Barra superior ─────────────────────────────── */
.topo {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--fundo-2);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 20;
  min-height: 58px;
}
.topo h1 { font-size: 17px; font-weight: 700; letter-spacing: .2px; flex: 1; }
/* Fundo branco: a moldura azul-marinho da arte sumiria sobre o tema escuro. */
.logo-topo { height: 34px; width: auto; flex: none; background: #fff; padding: 2px; border-radius: 5px; }
.topo .sub { font-size: 13px; color: var(--texto-fraco); font-weight: 500; }
.voltar {
  background: none; border: none; color: var(--texto);
  font-size: 26px; line-height: 1; padding: 6px 10px; cursor: pointer; border-radius: 10px;
}
.voltar:active { background: var(--fundo-3); }

.chip-fila {
  display: flex; align-items: center; gap: 6px;
  background: var(--fundo-3); border: 1px solid var(--borda);
  padding: 7px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.chip-fila.tem-fila { border-color: var(--amarelo); color: var(--amarelo); }
.chip-fila.online .ponto { background: var(--verde); }
.chip-fila.offline .ponto { background: var(--vermelho); }
.ponto {
  width: 10px; height: 10px; border-radius: 50%; background: var(--texto-fraco);
  flex: none;
}
.chip-fila.online .ponto { animation: pulsa 2.4s infinite; }
@keyframes pulsa { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ── Telas ──────────────────────────────────────── */
.tela { display: none; flex: 1; flex-direction: column; overflow-y: auto; }
.tela.ativa { display: flex; }
.corpo { padding: 16px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); flex: 1; }

/* ── Botões ─────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: var(--toque);
  border: none; border-radius: var(--raio);
  background: var(--fundo-3); color: var(--texto);
  font-size: 17px; font-weight: 700; font-family: inherit;
  cursor: pointer; padding: 14px 18px;
  transition: transform .08s ease, filter .12s ease;
}
.btn:active { transform: scale(.975); filter: brightness(1.25); }
.btn-primario { background: var(--laranja); color: #fff; }
.btn-salvar { background: var(--verde); color: #05210f; font-size: 20px; min-height: 68px; }
.btn-contorno { background: transparent; border: 2px solid var(--borda); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-pequeno { min-height: 46px; font-size: 15px; padding: 10px 14px; width: auto; }

/* ── Home: o botão gigante ──────────────────────── */
.home-centro {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 20px; gap: 22px;
}
.btn-nova {
  width: min(340px, 86vw); aspect-ratio: 1 / .82;
  border: none; border-radius: 26px;
  background: linear-gradient(160deg, var(--laranja) 0%, #e04e00 100%);
  color: #fff; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 14px 44px rgba(255, 107, 0, .32);
  transition: transform .1s ease;
}
.btn-nova:active { transform: scale(.96); }
.btn-nova .mais { font-size: 76px; font-weight: 300; line-height: .8; }
.btn-nova .rotulo { font-size: 23px; font-weight: 800; letter-spacing: .5px; }
.btn-nova .dica { font-size: 13px; opacity: .85; font-weight: 600; }

/* ── Grid de tipos ──────────────────────────────── */
.grid-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tipo-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 118px; padding: 14px 8px;
  background: var(--fundo-2); border: 2px solid var(--borda); border-radius: var(--raio);
  color: var(--texto); font-family: inherit; font-size: 15px; font-weight: 700;
  text-align: center; cursor: pointer;
  transition: transform .08s ease, border-color .12s ease;
}
.tipo-card:active { transform: scale(.95); }
.tipo-card .ic { font-size: 40px; line-height: 1; }

/* ── Cartões / campos ───────────────────────────── */
.cartao {
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px; margin-bottom: 14px;
}
.cartao-titulo {
  font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--texto-fraco); text-transform: uppercase; margin-bottom: 10px;
}
.linha { display: flex; align-items: center; gap: 10px; }
.crescer { flex: 1; min-width: 0; }

label.campo { display: block; margin-bottom: 14px; }
label.campo > span {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--texto-fraco); text-transform: uppercase; margin-bottom: 8px;
}
/* Lista por exclusão, e não por tipo. Enumerar os tipos deixou o campo de
   SENHA de fora: ele caía no tamanho padrão do navegador, uns 180 px, no meio
   de um formulário todo em largura cheia. Qualquer tipo novo que entrar no
   app (number, search, date) já nasce com o estilo certo. */
select, textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  width: 100%; min-height: 56px;
  background: var(--fundo-3); color: var(--texto);
  border: 2px solid var(--borda); border-radius: var(--raio);
  padding: 14px; font-size: 17px; font-family: inherit;
}
select { min-height: var(--toque); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-fraco) 50%),
                    linear-gradient(135deg, var(--texto-fraco) 50%, transparent 50%);
  background-position: calc(100% - 22px) 26px, calc(100% - 15px) 26px;
  background-size: 7px 7px, 7px 7px; background-repeat: no-repeat; }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }

/* ── GPS ────────────────────────────────────────── */
.gps-caixa { display: flex; gap: 12px; align-items: flex-start; }
.gps-icone { font-size: 26px; line-height: 1.2; }
.gps-endereco { font-size: 18px; font-weight: 700; }
.gps-detalhe { font-size: 13px; color: var(--texto-fraco); margin-top: 3px; }
.selo { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: .5px; }
.selo.ok { background: rgba(34,197,94,.15); color: var(--verde); }
.selo.esperando { background: rgba(245,158,11,.15); color: var(--amarelo); }
.selo.erro { background: rgba(239,68,68,.15); color: var(--vermelho); }

/* ── Foto ───────────────────────────────────────── */
.area-foto {
  width: 100%; min-height: 132px;
  border: 2px dashed var(--borda); border-radius: var(--raio);
  background: var(--fundo-3); color: var(--texto-fraco);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.area-foto .ic { font-size: 34px; }
.miniaturas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.miniatura { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--borda); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura button {
  position: absolute; top: 3px; right: 3px; width: 26px; height: 26px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff;
  font-size: 15px; cursor: pointer; line-height: 1;
}

/* ── Voz ────────────────────────────────────────── */
.btn-voz {
  width: 100%; min-height: 74px; border-radius: var(--raio);
  border: 2px solid var(--borda); background: var(--fundo-3); color: var(--texto);
  font-size: 17px; font-weight: 800; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  user-select: none; touch-action: none;
}
.btn-voz.gravando {
  background: var(--vermelho); border-color: var(--vermelho); color: #fff;
  animation: respira 1.1s ease-in-out infinite;
}
@keyframes respira { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55) } 50% { box-shadow: 0 0 0 16px rgba(239,68,68,0) } }
.transcricao {
  margin-top: 12px; padding: 12px; border-radius: 10px;
  background: var(--fundo-3); border: 1px solid var(--borda);
  min-height: 76px; font-size: 16px; line-height: 1.5;
}
.transcricao:empty::before { content: "A transcrição aparece aqui. Você pode editar depois."; color: var(--texto-fraco); font-style: italic; }
.transcricao[contenteditable="true"]:focus { border-color: var(--laranja); }

/* ── Gravidade ──────────────────────────────────── */
.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; min-height: 56px; border-radius: var(--raio);
  border: 2px solid var(--borda); background: var(--fundo-3); color: var(--texto-fraco);
  font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer;
}
.seg button[aria-pressed="true"] { color: #fff; }
.seg button[data-v="1"][aria-pressed="true"] { background: #16803c; border-color: #22c55e; }
.seg button[data-v="2"][aria-pressed="true"] { background: #a16207; border-color: #f59e0b; }
.seg button[data-v="3"][aria-pressed="true"] { background: #b91c1c; border-color: #ef4444; }
/* Vítimas é sim/não, não uma escala: verde no NÃO e vermelho no SIM, para o
   olho ler a resposta sem precisar do rótulo. */
#seg-vitimas button[data-v="0"][aria-pressed="true"] { background: #16803c; border-color: #22c55e; }
#seg-vitimas button[data-v="1"][aria-pressed="true"] { background: #b91c1c; border-color: #ef4444; }

/* Campo que faltou preencher. Pulsa por 2 s e para: aviso que fica piscando
   para sempre vira ruído e o agente aprende a ignorar. */
.faltando, .faltando input, .faltando textarea {
  border-color: #ef4444 !important;
  animation: pulsa-falta 0.55s ease-in-out 3;
}
@keyframes pulsa-falta {
  50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, .28); }
}

/* ── Rodapé fixo com o botão salvar ─────────────── */
.rodape {
  position: sticky; bottom: 0;
  padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--fundo) 62%, transparent);
  border-top: 1px solid var(--borda);
}

/* ── Lista de registros ─────────────────────────── */
.item-lista {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--fundo-2);
  border: 1px solid var(--borda); border-left: 5px solid var(--borda);
  border-radius: 12px; margin-bottom: 10px; width: 100%;
  font-family: inherit; color: var(--texto); text-align: left; cursor: pointer;
}
.item-lista .ic { font-size: 28px; flex: none; }
.item-lista .tit { font-size: 16px; font-weight: 700; }
.item-lista .meta { font-size: 13px; color: var(--texto-fraco); margin-top: 2px; }
.item-lista.pendente { border-left-color: var(--amarelo); }
.item-lista.enviado { border-left-color: var(--verde); }
.item-lista.erro { border-left-color: var(--vermelho); }

/* ── Ação de resolver, direto na lista ──────────── */
.item-lista { position: relative; }
.btn-resolver {
  flex: none; min-height: 52px; padding: 10px 14px;
  border: 2px solid var(--verde); border-radius: 12px;
  background: rgba(34,197,94,.12); color: var(--verde);
  font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.1;
}
.btn-resolver:active { background: var(--verde); color: #05210f; }
.btn-resolver .ic { font-size: 19px; }
.selo-resolvida {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(34,197,94,.14); color: var(--verde);
  border-radius: 999px; padding: 4px 11px;
  font-size: 12px; font-weight: 800; margin-top: 6px;
}
.item-lista.resolvida { opacity: .72; border-left-color: var(--verde); }

/* ── Folha inferior (bottom sheet) ──────────────── */
.folha {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.62);
  display: flex; align-items: flex-end; justify-content: center;
}
.folha[hidden] { display: none; }
.folha-caixa {
  width: min(460px, 100%);
  background: var(--fundo-2); border-top: 1px solid var(--borda);
  border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  max-height: 92vh; overflow-y: auto;
  animation: sobe .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes sobe { from { transform: translateY(30px); opacity: .5 } }
.folha-alca {
  width: 44px; height: 5px; border-radius: 99px;
  background: var(--borda); margin: 4px auto 16px;
}
.folha-caixa h2 { font-size: 20px; font-weight: 800; }
.folha-sub { font-size: 14px; color: var(--texto-fraco); margin: 4px 0 16px; }

/* ── Confirmação do plantão ─────────────────────── */
/* As horas são o que o militar precisa ler de relance, no escuro, dentro da
   viatura: por isso ocupam a caixa toda e em corpo grande. */
.turno-horas {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--fundo-3); border: 1px solid var(--borda);
  border-radius: 14px; padding: 16px 12px; margin-bottom: 10px;
}
.turno-horas > div { text-align: center; flex: 1; min-width: 0; }
.turno-rot {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px;
  color: var(--texto-fraco);
}
.turno-horas b { display: block; font-size: 30px; font-weight: 800; line-height: 1.2; }
.turno-seta { font-size: 20px; color: var(--laranja); flex: none; }
.turno-duracao {
  text-align: center; font-size: 13px; color: var(--texto-fraco); margin-bottom: 14px;
}
.turno-dados {
  display: grid; grid-template-columns: 92px 1fr; gap: 6px 12px;
  font-size: 14px; margin-bottom: 18px;
}
.turno-dados dt { color: var(--texto-fraco); }
.turno-dados dd { font-weight: 700; word-break: break-word; }

/* ── Avisos ─────────────────────────────────────── */
.aviso {
  padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600;
  margin-bottom: 14px; border: 1px solid;
}
.aviso.alerta { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.4); color: #fbbf24; }
.aviso.info { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.4); color: #93c5fd; }
.aviso.erro { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.4); color: #fca5a5; }

/* ── Toast ──────────────────────────────────────── */
#toast {
  position: fixed; left: 50%; bottom: 26px;
  /* 140% da própria altura (~73 px) não vencia o `bottom: 26px`: sobravam
     4 px da pílula presos na base da tela, com a borda verde ou vermelha do
     último aviso — parecia uma aba aberta no rodapé do app. Agora a translação
     é a altura inteira MAIS a distância do rodapé e a sombra. */
  transform: translate(-50%, calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
  background: var(--fundo-3); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 999px;
  padding: 14px 22px; font-size: 16px; font-weight: 700;
  z-index: 100;
  transition: transform .28s cubic-bezier(.2,.9,.3,1.2), opacity .18s linear;
  max-width: 88vw; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
#toast.mostra { transform: translate(-50%, 0); opacity: 1; }
#toast.ok { border-color: var(--verde); }
#toast.ruim { border-color: var(--vermelho); }

.vazio { text-align: center; color: var(--texto-fraco); padding: 44px 20px; font-size: 15px; }
.vazio .ic { font-size: 46px; display: block; margin-bottom: 12px; opacity: .5; }

/* Tela grande: centraliza o app para nao ficar esticado no desktop */
@media (min-width: 720px) {
  body { max-width: 460px; margin: 0 auto; border-left: 1px solid var(--borda); border-right: 1px solid var(--borda); }
}