/* ===============================
   BOTÕES PADRÃO
================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-default);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition-default);
}

/* Botão padrão azul */
.btn-primary {
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-secondary));
  color: #fff;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59,130,246,0.4);
}

/* Botão ação tabela (Ver) */
.btn-acao {
  background: #1e293b;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  transition: var(--transition-default);
}

.btn-acao:hover {
  background: var(--blue-primary);
}

/* ===============================
   CARDS PADRÃO
================================= */

.card {
  background: var(--bg-card);
  padding: 20px;
  border-radius: var(--radius-default);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  text-align: center;
  transition: var(--transition-default);
}

.card span {
  font-size: 24px;
  font-weight: 700;
  display: block;
}

.card p {
  font-size: 13px;
  margin-top: 5px;
}

/* ===============================
   BADGES DE STATUS
================================= */

.status-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.status-online {
  color: var(--green);
}

.status-offline {
  color: var(--red);
}

.status-warning {
  color: var(--yellow);
}

/* ===============================
   BOTÕES MAPA (FindSites)
================================= */

.map-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.btn-map {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;

  text-decoration: none;
  color: #fff;
  transition: var(--transition-default);
}

.btn-map svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.btn-maps {
  flex: 1;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;

  color: #111;

  border: 3px solid transparent;
  border-radius: 14px;

  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(100deg, rgb(66, 133, 244), rgb(249, 74, 54), rgb(251, 188, 5), rgb(41, 181, 113)) border-box;

  background-size: 200% 200%;
  animation: mapsGradient 8s ease infinite;


}

.btn-maps:hover {
  transform: translateY(-3px);
}

@keyframes mapsGradient {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.btn-waze {
  color: #ffffff;
  background: linear-gradient(135deg, #33CCFF, #0099FF);
}

.btn-whatsapp {
  background: linear-gradient(135deg, #25D366, #1ebe5d);
}

.btn-map:hover {
  transform: translateY(-3px);
}

/* ===============================
   MINI MAPA PADRÃO
================================= */

.mini-mapa {
  width: 100%;
  height: 340px;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.mini-mapa iframe {
  width: 100%;
  height: 100%;
  border: none;
}