/* Muroa 2025 — estilo global (muroa.css) */

/* cores e variáveis */
:root{
  --azul-escuro:#004c87;
  --azul-medio:#0276d6;
  --cinza-fundo:#f0f3f6;
  --cinza-card:#ffffff;
  --cinza-botao-off:#a9c7dd;
  --fonte: "Segoe UI", Arial, sans-serif;
  --radius: 14px;
  --max-width: 980px;
}

/* reset simples */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--cinza-fundo);font-family:var(--fonte);}

/* header/topo */
header.muroa-header{
  width:100%;
  background:var(--azul-escuro);
  color:white;
  padding:16px 18px;
  text-align:center;
  font-size:20px;
  font-weight:700;
  box-shadow:0 2px 9px rgba(0,0,0,0.12);
}

/* nav principal */
nav.muroa-nav{
  width:100%;
  background:var(--azul-medio);
  padding:10px 0;
  text-align:center;
}
nav.muroa-nav a{
  color:white;
  margin:0 14px;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
}
nav.muroa-nav a:hover{text-decoration:underline}

/* container principal */
.main-wrap{
  width:95%;
  max-width:var(--max-width);
  margin:20px auto 50px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

/* cartão */
.card{
  width:100%;
  background:var(--cinza-card);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

/* títulos */
h2{color:var(--azul-escuro); margin-bottom:10px; font-size:1.45rem;}
h3{color:var(--azul-escuro); font-size:1.22rem;}

/* inputs e botões */
.input-full{width:100%;padding:12px;border-radius:10px;border:1px solid #d7eaf9;background:#f7fbff;font-size:16px}
.btn{
  padding:12px 18px;
  border-radius:12px;
  border:none;
  background:var(--azul-medio);
  color:#fff; font-weight:700;
  cursor:pointer; margin:6px 0;
  width:100%;
  transition:0.25s;
}
.btn:hover{background:var(--azul-escuro); transform:translateY(-2px);}

.btn-secondary{background:#6c9fcf}

.btn-secondary[disabled],
.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important;
}

/* status */
.status-msg{font-weight:700;margin-top:8px}

/* modal padrão */
.modal {
  display:none;position:fixed;z-index:9999;
  left:0;top:0;width:100%;height:100%;
  background:rgba(0,0,0,0.6);padding-top:60px;
}
.modal .modal-content{
  background:#fff;margin:auto;padding:20px;width:92%;
  max-width:680px;border-radius:14px;
  box-shadow:0 6px 30px rgba(0,0,0,0.2);
}
.modal .close{
  float:right;color:#444;font-size:28px;font-weight:700;cursor:pointer}

/* GRID RESPONSIVO PARA O MAPA */
.grid-container {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
  max-width:480px;
  margin:12px auto 40px;
}

.grid-container button {
  width:60px;height:60px;
  font-size:18px;
  background:var(--azul-medio);
  color:white;border:none;
  border-radius:14px;
  cursor:pointer;
  font-weight:600;
  box-shadow:0 3px 10px rgba(0,0,0,0.12);
  transition:0.2s;
}
.grid-container button:hover:not(:disabled){
  transform:scale(1.08);
  background:#035aa5;
}
.grid-container button:disabled{
  background:var(--cinza-botao-off);cursor:not-allowed;
}

/* RESPONSIVIDADE MELHORADA */
@media (max-width: 420px){
  nav.muroa-nav a{margin:0 8px;font-size:14px;}
  .grid-container{
    grid-template-columns:repeat(4, 1fr);
  }
}

@media (max-width: 360px){
  .grid-container{
    grid-template-columns:repeat(3, 1fr);
  }
  h2{font-size:1.3rem;}
  .card{padding:14px;}
}