/* Reset ligero */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Body y layout */
body {
  font-family: sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f9f9f9;
}
header, footer {
  background: #003366;
  color: white;
  padding: 0.5em 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header h1 { font-size: 1.5rem; }
nav a { color: #ffd700; text-decoration: none; margin-left: 0.5em; font-size: 0.9rem; }

/* Main */
main { max-width: 1000px; margin: 1em auto; padding: 0 1em; }

/* Section Map */
#section-map h2 { margin-bottom: 0.5em; }
#map { height: 400px; border: 2px solid #ccc; border-radius: 8px; }

/* Section List */
#section-list h2 { margin: 1em 0 0.5em; }
table {
  width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden;
}
th, td {
  padding: 0.5em; border-bottom: 1px solid #eee; text-align: left;
}
thead { background: #0055aa; color: white; }
tbody tr:hover { background: #f0f8ff; }

/* Section Form */
#section-form h2 { margin: 1em 0 0.5em; }
form {
  background: white; padding: 1em; border-radius: 8px;
  display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em;
}
form label { display: block; margin-bottom: 0.25em; }
form input { width: 100%; padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; }
button {
  grid-column: span 2;
  padding: 0.75em; background: #0055aa; color: white;
  border: none; border-radius: 4px; cursor: pointer;
  transition: background 0.3s;
}
button:hover { background: #003366; }

/* Responsive */
@media (max-width: 600px) {
  form { grid-template-columns: 1fr; }
}

/* Animación bouncing para marcadores */
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.leaflet-marker-icon {
  animation: bounce 1s infinite;
}