/* ===========================================================================
   Robô Leads Maps — folha única.
   Cores tiradas da logo: azul elétrico, azul escuro e branco.
   Escrito mobile-first: o aplicativo da promotora é usado no celular, em pé,
   muitas vezes no sol.
   =========================================================================== */

:root {
  --azul:        #1273FF;
  --azul-escuro: #0B4FC2;
  --azul-claro:  #E8F1FF;
  --navy:        #0B1B2E;
  --navy-suave:  #14304F;

  --verde:       #15803D;
  --verde-claro: #E7F6EC;
  --vermelho:    #C62828;
  --vermelho-claro: #FDECEC;
  --ambar:       #B45309;
  --ambar-claro: #FEF3DC;

  --texto:       #16202C;
  --texto-suave: #5C6B7A;
  --borda:       #DCE4ED;
  --fundo:       #F3F6FA;
  --branco:      #FFFFFF;

  --raio:        14px;
  --sombra:      0 1px 2px rgba(11,27,46,.06), 0 6px 18px rgba(11,27,46,.07);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--fonte);
  color: var(--texto);
  background: var(--fundo);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.45rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }

a { color: var(--azul-escuro); }

.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ─── Topo ───────────────────────────────────────────────────────────────── */
.topo {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem;
  background: var(--navy);
  color: #fff;
  position: sticky; top: 0; z-index: 500;
  padding-top: calc(.6rem + env(safe-area-inset-top));
}
.topo-marca { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-size: 1rem; }
.topo-marca img { border-radius: 8px; background: #fff; }
.topo-marca b { color: #6FB5FF; font-weight: 700; }

.topo-menu { display: flex; gap: .15rem; margin-left: auto; overflow-x: auto; }
.topo-menu a {
  color: #CBD9E8; text-decoration: none; padding: .4rem .7rem;
  border-radius: 999px; font-size: .9rem; white-space: nowrap;
}
.topo-menu a:hover { background: var(--navy-suave); color: #fff; }
.topo-menu a.ativo { background: var(--azul); color: #fff; font-weight: 600; }

.topo-sair { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.topo-menu ~ .topo-sair { margin-left: .5rem; }
.topo-nome { font-size: .85rem; color: #CBD9E8; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .botao-texto { color: #CBD9E8; }
.topo .botao-texto:hover { color: #fff; }

/* ─── Estrutura ──────────────────────────────────────────────────────────── */
.conteudo {
  max-width: 1180px; margin: 0 auto;
  padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom));
}

.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1rem;
  margin-bottom: 1rem;
}
.cartao.centralizado { max-width: 28rem; margin: 3rem auto; text-align: center; }

.cabecalho-pagina {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.cabecalho-acoes { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rotulo-inline { font-size: .9rem; color: var(--texto-suave); }

.titulo-secao { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-suave); }
.apoio { color: var(--texto-suave); font-size: .9rem; margin: .35rem 0; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .88em; }
.nowrap { white-space: nowrap; }

/* ─── Botões ─────────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--azul); color: #fff; border: 0;
  padding: .7rem 1.1rem; border-radius: 10px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  min-height: 44px;
}
.botao:hover { background: var(--azul-escuro); }
.botao:disabled { background: #9FB4CC; cursor: not-allowed; }
.botao-cheio { width: 100%; }
.botao-secundario { background: var(--azul-claro); color: var(--azul-escuro); }
.botao-secundario:hover { background: #D6E6FF; }

.botao-texto {
  background: none; border: 0; padding: .35rem .4rem; cursor: pointer;
  color: var(--azul-escuro); font: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
}
.botao-texto:hover { text-decoration: underline; }

/* ─── Formulários ────────────────────────────────────────────────────────── */
.formulario label, .filtros label {
  display: block; font-size: .85rem; font-weight: 600;
  margin: .9rem 0 .3rem; color: var(--texto);
}
.formulario label.caixa { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.formulario label.caixa input { width: auto; min-height: auto; }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], select {
  width: 100%; padding: .65rem .75rem;
  border: 1px solid var(--borda); border-radius: 10px;
  font: inherit; background: #fff; color: var(--texto); min-height: 44px;
}
input:focus, select:focus, button:focus-visible {
  outline: 3px solid rgba(18,115,255,.35); outline-offset: 1px; border-color: var(--azul);
}
.formulario small.apoio { display: block; margin-top: .25rem; }
.formulario .botao { margin-top: 1.2rem; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.filtros {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
}
.filtros label { margin-top: 0; }
.filtros .botao { min-height: 44px; }

.raios { border: 1px solid var(--borda); border-radius: 10px; padding: .75rem; margin-top: 1rem; }
.raios legend { font-size: .85rem; font-weight: 600; padding: 0 .35rem; }
.raios-botoes { display: flex; gap: .4rem; flex-wrap: wrap; }
.raio-opcao {
  border: 1px solid var(--borda); background: #fff; border-radius: 999px;
  padding: .5rem .9rem; font: inherit; cursor: pointer; min-height: 40px;
}
.raio-opcao.ativo { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }

/* ─── Avisos ─────────────────────────────────────────────────────────────── */
.aviso { border-radius: 10px; padding: .7rem .85rem; font-size: .92rem; margin: .75rem 0; }
.aviso-erro { background: var(--vermelho-claro); color: var(--vermelho); border: 1px solid #F3C9C9; }
.aviso-ok   { background: var(--verde-claro);    color: var(--verde);    border: 1px solid #C6E7D1; }
.aviso-gps  { background: var(--ambar-claro);    color: var(--ambar);    border: 1px solid #F0DCB0; }

/* ─── Pastilhas de status ────────────────────────────────────────────────── */
.pastilha {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  background: #EEF2F7; color: var(--texto-suave);
}
.familia-ok       > .pastilha, .pastilha.familia-ok       { background: var(--verde-claro);    color: var(--verde); }
.familia-recusado > .pastilha, .pastilha.familia-recusado { background: var(--vermelho-claro); color: var(--vermelho); }
.familia-gps      > .pastilha, .pastilha.familia-gps      { background: var(--ambar-claro);    color: var(--ambar); }

/* ─── Tabelas ────────────────────────────────────────────────────────────── */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); border-bottom: 1px solid var(--borda); padding: .55rem .6rem; white-space: nowrap;
}
.tabela td { padding: .6rem; border-bottom: 1px solid #EEF2F7; vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .vazio { text-align: center; color: var(--texto-suave); padding: 2rem 1rem; }
.tabela .motivo { color: var(--texto-suave); max-width: 24rem; }
.linha-inativa { opacity: .55; }
.acoes { display: flex; gap: .25rem; align-items: center; white-space: nowrap; }
.acoes form { display: inline; }

/* ─── Métricas ───────────────────────────────────────────────────────────── */
.cartoes-metricas {
  display: grid; gap: .75rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.metrica {
  background: var(--branco); border: 1px solid var(--borda); border-left: 4px solid var(--azul);
  border-radius: var(--raio); padding: .9rem 1rem; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: .15rem;
}
.metrica-valor { font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.metrica-rotulo { font-size: .8rem; color: var(--texto-suave); }
.metrica-ok       { border-left-color: var(--verde); }
.metrica-recusado { border-left-color: var(--vermelho); }
.metrica-alerta   { border-left-color: var(--ambar); }

.estado-atualizacao { font-size: .8rem; color: var(--texto-suave); }

/* ─── Mapas ──────────────────────────────────────────────────────────────── */
.mapa { width: 100%; border-radius: 10px; border: 1px solid var(--borda); background: #E9EEF4; }
.mapa-admin  { height: 460px; }
.mapa-editor { height: 420px; }
.mapa-app    { height: 230px; }

.legenda-mapa { font-size: .8rem; color: var(--texto-suave); display: flex; gap: .9rem; flex-wrap: wrap; margin: .6rem 0 0; }
.chave { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .25rem; vertical-align: -1px; }
.chave-area     { background: rgba(18,115,255,.35); border: 1px solid var(--azul); }
.chave-ok       { background: var(--verde); }
.chave-recusado { background: var(--vermelho); }
.chave-gps      { background: var(--ambar); }

.painel-duas-colunas { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .painel-duas-colunas { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

.popup-titulo { font-weight: 700; margin-bottom: .2rem; }
.popup-linha { font-size: .85rem; color: #334; }

/* ─── Fluxo ao vivo ──────────────────────────────────────────────────────── */
.fluxo { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto; }
.fluxo li {
  display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center;
  padding: .55rem .3rem; border-bottom: 1px solid #EEF2F7;
}
.fluxo li:last-child { border-bottom: 0; }
.fluxo .fluxo-quem { font-weight: 600; font-size: .92rem; }
.fluxo .fluxo-onde { font-size: .8rem; color: var(--texto-suave); }
.fluxo .fluxo-hora { font-size: .8rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.fluxo .novo { animation: entrou 1.6s ease-out; }
@keyframes entrou { from { background: #FFF6D8; } to { background: transparent; } }

/* ─── Avisos flutuantes ──────────────────────────────────────────────────── */
.avisos-flutuantes {
  position: fixed; right: 1rem; z-index: 900;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: .5rem; max-width: min(22rem, calc(100vw - 2rem));
}
.toast {
  background: var(--navy); color: #fff; border-radius: 12px; padding: .7rem .9rem;
  box-shadow: 0 10px 30px rgba(11,27,46,.25); font-size: .9rem;
  border-left: 4px solid var(--azul);
}
.toast-ok       { border-left-color: #35C76A; }
.toast-recusado { border-left-color: #FF6B6B; }
.toast-gps      { border-left-color: #FFB84D; }
.toast b { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }

/* ─── Tela de entrar ─────────────────────────────────────────────────────── */
.tela-entrar { background: linear-gradient(170deg, var(--navy) 0%, #143254 60%, #1B4A7A 100%); min-height: 100vh; }
.tela-entrar .conteudo { padding-top: 2rem; }
.cartao-entrar { max-width: 23rem; margin: 1rem auto; text-align: center; padding: 1.5rem; }
.cartao-entrar form { text-align: left; }
.marca-grande { width: 112px; height: 112px; margin-bottom: .25rem; }

/* ─── Aplicativo da promotora ────────────────────────────────────────────── */
.tela-app .conteudo { max-width: 32rem; }
.nome-promotora { font-size: 1.5rem; margin-bottom: .75rem; }

.ficha { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.ficha dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin-top: .7rem; }
.ficha dd { margin: .1rem 0 0; font-weight: 600; }

.cartao-acao { text-align: center; }
.botao-presenca {
  width: 100%; min-height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  background: linear-gradient(160deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: #fff; border: 0; border-radius: 18px; cursor: pointer;
  font: inherit; box-shadow: 0 8px 22px rgba(18,115,255,.32);
  transition: transform .08s ease, box-shadow .15s ease;
}
.botao-presenca:active { transform: scale(.985); box-shadow: 0 4px 12px rgba(18,115,255,.3); }
.botao-presenca:disabled { background: #94A8BF; box-shadow: none; cursor: not-allowed; }
.rotulo-presenca { font-size: 1.7rem; font-weight: 800; letter-spacing: .04em; }
.sub-presenca { font-size: .85rem; opacity: .9; font-weight: 400; }
.botao-presenca.ocupado .rotulo-presenca { font-size: 1.25rem; }

.resultado { margin-top: 1rem; padding: .85rem; border-radius: 12px; font-size: .95rem; text-align: left; }
.resultado-ok       { background: var(--verde-claro);    color: var(--verde);    border: 1px solid #C6E7D1; }
.resultado-recusado { background: var(--vermelho-claro); color: var(--vermelho); border: 1px solid #F3C9C9; }
.resultado-gps      { background: var(--ambar-claro);    color: var(--ambar);    border: 1px solid #F0DCB0; }
.resultado b { display: block; margin-bottom: .2rem; }

.historico { list-style: none; margin: 0; padding: 0; }
.historico-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center;
  padding: .55rem .1rem; border-bottom: 1px solid #EEF2F7; font-size: .9rem;
}
.historico-item:last-child { border-bottom: 0; }
.historico-quando { color: var(--texto-suave); font-size: .82rem; }
.historico-detalhe { color: var(--texto-suave); font-size: .82rem; text-align: right; }
.historico-vazio { color: var(--texto-suave); padding: 1rem 0; list-style: none; }
.nota-gps { margin-top: .6rem; }

/* ─── Formulário do ponto, lado a lado em tela grande ────────────────────── */
.formulario-local { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .formulario-local { grid-template-columns: minmax(320px, 420px) 1fr; align-items: start; }
}

@media (max-width: 480px) {
  .dupla { grid-template-columns: 1fr; }
  .topo-nome { display: none; }
  h1 { font-size: 1.25rem; }
}