/* assets/styles.css */

/* =========================================================
   Variáveis / Base
   =======================================================*/
:root{
  --bg:#f4f6f8;
  --brand:#1e2a38;
  --brand-2:#2c3e50;
  --brand-3:#34495e;
  --brand-4:#3d5a73;
  --text:#0f172a;
  --muted:#64748b;
  --white:#fff;
  --radius:12px;
  --gap:12px;
  --shadow:0 2px 10px rgba(0,0,0,.12);
  --shadow-2:0 2px 6px rgba(0,0,0,.15);
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }

body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* =========================================================
   LOGIN (index.html)
   =======================================================*/
.login-container{
  min-height:100dvh;
  padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:var(--brand); color:#fff;
}
.login-container img{ width:180px; max-width:80%; height:auto; margin-bottom:24px; }
.login-box{
  width:min(420px,100%); background:#fff; color:#000; padding:20px; border-radius:10px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;
}
.login-box input{ padding:12px; border-radius:8px; border:1px solid #ccc; font-size:16px; width:100%; }
.login-box button{ padding:12px; background:var(--brand); color:#fff; border:none; border-radius:8px; font-weight:bold; cursor:pointer; }
.login-box button:hover{ background:#32455a; }

/* =========================================================
   Painel / Mapa (index.html)
   =======================================================*/
.painel{ display:none; min-height:100svh; background:var(--bg); }

.menu-lateral{
  width:240px; background:var(--brand-2); color:#fff; padding:16px;
  display:flex; flex-direction:column; gap:10px;
}
.menu-lateral h3{ margin:0 0 6px 0; font-size:18px; }
.menu-lateral ul{ list-style:none; margin:0; padding:0; }
.menu-lateral li{ margin-bottom:10px; }
.menu-lateral li button{ width:100%; padding:10px; background:var(--brand-3); color:#fff; border:none; border-radius:6px; cursor:pointer; }
.menu-lateral li button:hover{ background:var(--brand-4); }

.conteudo-dashboard{ display:flex; flex-direction:column; flex:1; min-width:0; }

.header{
  position:sticky; top:0; z-index:20;
  background:var(--brand); color:#fff; padding:14px 56px;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.header .titulo{ font-size:clamp(18px,2vw,24px); line-height:1.2; }
.header .logo{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; object-fit:cover; }
.header .logo.esquerda{ left:12px; }
.header .logo.direita{ right:56px; }

/* Botões topo */
.btn-menu, .btn-filtros{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:8px; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; display:none; align-items:center; justify-content:center;
  font-size:20px; line-height:0; cursor:pointer;
}
.btn-menu{ left:12px; }
.btn-filtros{ right:12px; font-size:18px; }

.colapsavel{
  background:#fff; box-shadow:var(--shadow);
  overflow:hidden;
  transition:max-height .25s ease, padding .25s ease, box-shadow .25s ease;
  margin-top:8px;
}
.colapsavel.fechada{ max-height:0; padding:0; box-shadow:none; margin-top:0; }
.colapsavel.aberta{ max-height:1000px; padding:10px; }

/* Menu colapsável (mobile) */
.menu-mobile .card{ background:var(--brand-2); color:#fff; border-radius:10px; padding:16px; }
.menu-mobile .card h3{ margin:6px 0 12px 0; }
.menu-mobile .card .btn{ width:100%; padding:10px; background:var(--brand-3); color:#fff; border:none; border-radius:6px; cursor:pointer; }
.menu-mobile .card .btn + .btn{ margin-top:12px; }
.menu-mobile .card .btn:hover{ background:var(--brand-4); }

/* ===== Filtros (index) ===== */
.filtros{
  display:grid; gap:10px; grid-template-columns:repeat(12,1fr); align-items:center;
  font-size:14px;
}
.filtros label{ font-weight:bold; white-space:nowrap; }

/* inputs/controles dos filtros */
.filtros select,
.filtros input,
.filtros button{
  padding:8px; font-size:14px; border-radius:6px; border:1px solid #ccc; width:100%;
}

/* grid (desktop) – pares 2/4 para label/campo */
.filtros label.campo-tipo,
.filtros label.campo-busca,
.filtros label.campo-horario{ grid-column:span 2; }

.filtros div.campo-tipo,
.filtros div.campo-busca,
.filtros div.campo-horario{ grid-column:span 4; }

.filtros .campo-botoes{ grid-column:span 4; }
.filtros .campo-heat{ grid-column:1 / -1; display:flex; justify-content:flex-end; }

.grupo-botoes{ display:flex; gap:10px; align-items:center; }
.heatmap-botao{ display:flex; justify-content:flex-end; }

.filtros .btn,
#limparFiltros,
#btnHeatmap{
  background:#252f38; color:#fff; border:none; border-radius:6px; padding:8px 12px; cursor:pointer;
}
.filtros .btn:hover, #limparFiltros:hover{ background:var(--brand-4); }
#btnHeatmap{ background:var(--brand-4); }
#btnHeatmap:hover{ background:#5e7b96; }

#map{ flex:1; min-height:280px; position:relative; }

.loading{
  position:static; margin:8px 10px 0 10px; background:#fff; border:1px solid #e0e0e0;
  border-radius:8px; padding:8px 12px; box-shadow:0 2px 6px rgba(0,0,0,.08); font-size:14px; display:none;
}
.loading.show{ display:block; }

#btnSair{
  position:fixed; bottom:20px; right:20px; background:#d9534f; color:#fff; border:none; border-radius:6px;
  padding:10px 16px; font-size:14px; cursor:pointer; box-shadow:var(--shadow-2); z-index:100;
}
#btnSair:hover{ background:#c9302c; }

/* Desktop */
@media (min-width:1024px){
  .painel{ display:flex; }
  .menu-lateral{ display:flex; }
  .colapsavel.menu-mobile{ display:none; }
  .colapsavel.filtros-mobile{ display:block; }
  .btn-menu{ display:none; }
  .btn-filtros{ display:flex; }
  .header .titulo{ font-size:clamp(20px,2vw,24px); }
}

/* Tablet / Mobile */
@media (max-width:1023.98px){
  .painel{ display:flex; flex-direction:column; }
  .menu-lateral{ display:none; }
  .btn-menu, .btn-filtros{ display:flex; }
  .header{ padding:14px 48px; }
  .header .logo.esquerda{ left:52px; }
  .header .logo.direita{ right:52px; }
  .header .titulo{ font-size:18px; }

  .filtros label.campo-tipo,
  .filtros label.campo-busca,
  .filtros label.campo-horario{ grid-column:span 4; }
  .filtros div.campo-tipo,
  .filtros div.campo-busca,
  .filtros div.campo-horario{ grid-column:span 8; }
  .filtros .campo-botoes{ grid-column:span 12; }
  .filtros .campo-heat{ grid-column:span 12; }
}

@media (max-width:599.98px){
  .login-container img{ width:140px; }
  .login-box{ padding:16px; }
  .header .logo{ width:32px; height:32px; }
  .header .titulo{ font-size:17px; }
  .filtros{ grid-template-columns:1fr 1fr; }
  .filtros label{ font-size:13px; }
  .filtros select, .filtros input{ font-size:13px; }
  .filtros label.campo-tipo,
  .filtros label.campo-busca,
  .filtros label.campo-horario,
  .filtros div.campo-tipo,
  .filtros div.campo-busca,
  .filtros div.campo-horario,
  .filtros .campo-botoes,
  .filtros .campo-heat{ grid-column:1/-1; }
  .grupo-botoes{ justify-content:stretch; }
  .grupo-botoes button{ flex:1; }
  #btnSair{ bottom:16px; right:16px; }
}

/* =========================================================
   Selecionar (lista de busca) — ESCOPADO para não
   colidir com os filtros da index
   =======================================================*/
.topbar{
  position: sticky; top:0; z-index:10;
  background: var(--brand);
  color: #fff;
  padding: calc(10px + var(--safe-top)) 16px 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.topbar h1{
  grid-column: 2;
  margin: 0;
  font-size: clamp(18px, 2.5vw, 28px);
  text-align: center;
  line-height: 1.1;
  font-weight: 700;
}
.btn-voltar{
  grid-column: 1;
  justify-self: start;
  background: rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  padding: 8px 14px;
  border-radius:10px;
  font-size: 14px;
  cursor: pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-voltar:hover{ background: rgba(255,255,255,.2); }

.wrap{ width:min(900px,100%); margin:16px auto; padding:0 16px; }

/* >>> Escopo colocado aqui <<< */
.wrap .busca{ display:grid; grid-template-columns:1fr auto; gap:10px; margin:16px 0 8px; }
.wrap .busca .campo-busca{
  height: 46px; padding:10px 12px; border:1px solid #cbd5e1; border-radius:10px; font-size:16px; background:#fff;
}
.wrap .busca .btn-buscar{
  height: 46px; padding:0 18px; border:none; border-radius:10px; background:var(--brand); color:#fff; font-size:16px; cursor:pointer; box-shadow:var(--shadow);
}
.wrap .busca .btn-buscar:hover{ filter:brightness(1.05); }

ul#resultados{ list-style:none; margin:12px 0 24px; padding:0; display:grid; gap:12px; }
ul#resultados li{
  background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; line-height:1.35; cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
}
ul#resultados li:hover{ background:#f8fafc; box-shadow:var(--shadow); transform:translateY(-1px); }
.muted{ color:var(--muted); font-size:13px; }

/* breakpoints da página selecionar (escopados) */
@media (max-width:639.98px){
  .wrap .busca{ grid-template-columns:1fr; }
  .wrap .busca .btn-buscar{ width:100%; }
  ul#resultados li{ padding:16px; }
}
@media (min-width:768px){
  .wrap .busca .campo-busca{ font-size:17px; height:48px; }
  .wrap .busca .btn-buscar{ height:48px; font-size:17px; }
  ul#resultados{ gap:14px; }
  ul#resultados li{ padding:16px 18px; }
}
@media (min-width:1024px){
  .wrap{ padding:0 24px; }
  ul#resultados li{ padding:18px 20px; }
}

/* =========================================================
   Visualizar / Informações (cards)
   =======================================================*/
.formulario-box{
  background:#fff; padding:20px 30px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,0.2); max-width:720px; margin:auto;
}
.formulario-box h2{ margin:0 0 20px 0; text-align:center; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid .full{ grid-column:1 / -1; }
label{ display:block; margin-bottom:6px; font-weight:bold; }
input, textarea{
  width:100%; padding:8px; border-radius:6px; border:1px solid #ccc; font-size:14px; background:#f0f0f0;
}
textarea{ resize:vertical; }
.botoes{ margin-top:16px; display:flex; gap:10px; }
.botoes button{ padding:10px 16px; border:none; background:var(--brand); color:#fff; border-radius:6px; cursor:pointer; }

.outros-dados{ margin-top:24px; background:#fafafa; border:1px solid #e0e0e0; border-radius:8px; padding:12px 16px; }
.outros-dados h3{ margin:0 0 10px 0; font-size:16px; }
.outros-dados .par{ display:grid; grid-template-columns:220px 1fr; gap:8px; padding:6px 0; border-bottom:1px dashed #e0e0e0; }
.outros-dados .par:last-child{ border-bottom:0; }
.chave{ color:#444; }
.valor{ color:#111; word-break:break-word; }

@media (max-width:640px){
  .grid{ grid-template-columns:1fr; }
  .outros-dados .par{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}