/* Reset básico */
* {
  margin: 0; /* Elimina márgenes predeterminados de todos los elementos */
  padding: 0; /* Elimina relleno predeterminado */
  box-sizing: border-box; /* Incluye padding y borde dentro del ancho y alto total del elemento */
  font-family: "Segoe UI", sans-serif; /* Establece la fuente principal para todos los elementos */
}

body {
  background-color: #f2f2f2; /* Color de fondo claro */
  color: #1a1a1a; /* Color de texto principal */
  scroll-behavior: smooth; /* Desplazamiento suave al navegar */
}

.container {
  max-width: 1200px; /* Ancho máximo para que el contenido no se extienda demasiado en pantallas grandes */
  margin: 60px auto; /* Centrado vertical y horizontal con margen superior/inferior */
  padding: 40px 20px; /* Espacio interno del contenedor */
  background: #fff; /* Fondo blanco para distinguir del fondo general */
  border-radius: 16px; /* Bordes redondeados suaves */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Sombra sutil para dar efecto de elevación */
}

h2 {
  font-size: 28px; /* Tamaño grande para títulos */
  color: #222; /* Texto más oscuro para títulos */
  margin-bottom: 24px; /* Espacio debajo del título */
  text-align: center; /* Centrado horizontal del texto */
  font-weight: 600; /* Grosor medio de fuente */
  font-family: "Playfair Display", serif; /* Fuente decorativa para mayor contraste con el texto general */
}

form {
  display: grid; /* Usa rejilla para organizar los campos del formulario */
  gap: 14px; /* Espacio entre los campos */
  margin-bottom: 40px; /* Espacio inferior para separación con otros elementos */
}

form input,
form select {
  padding: 12px; /* Espaciado interno cómodo */
  border: 1px solid #ccc; /* Borde gris claro */
  border-radius: 8px; /* Bordes suavemente redondeados */
  font-size: 15px; /* Tamaño legible para texto del campo */
  width: 100%; /* Campos se expanden al ancho total disponible */
}

form button {
  background-color: #9e9e9e; /* Color gris medio para el botón */
  color: white; /* Texto blanco para contraste */
  border: none; /* Elimina el borde por defecto */
  padding: 14px; /* Espaciado interno amplio */
  font-size: 16px; /* Texto claro y legible */
  border-radius: 8px; /* Bordes redondeados del botón */
  cursor: pointer; /* Cambia el cursor a puntero */
  transition: background 0.3s ease; /* Transición suave al hacer hover */
}

form button:hover {
  background-color: #6e6e6e; /* Color más oscuro al pasar el cursor */
}

table {
  width: 100%; /* Ocupa todo el ancho del contenedor */
  border-collapse: collapse; /* Elimina el espacio entre bordes de celdas */
  margin-top: 20px; /* Espacio arriba de la tabla */
  background-color: #fff; /* Fondo blanco uniforme */
  border-radius: 12px; /* Bordes redondeados */
  overflow: hidden; /* Oculta contenido que se salga del borde */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* Sombra suave para resaltar la tabla */
}

table th,
table td {
  padding: 14px; /* Espaciado interno en celdas */
  text-align: left; /* Alineación de texto a la izquierda */
  border-bottom: 1px solid #eee; /* Línea sutil debajo de cada fila */
  font-size: 15px; /* Tamaño consistente del texto */
}

table th {
  background-color: #b9b6b6; /* Color de fondo gris claro para los encabezados */
  color: white; /* Texto blanco sobre fondo gris */
  text-transform: uppercase; /* Convierte texto del encabezado a mayúsculas */
}

table tr:nth-child(even) {
  background-color: #f9f9f9; /* Fondo alternado en filas pares para mejorar legibilidad */
}

table td form {
  display: inline; /* Muestra formularios en línea para que no interrumpan el flujo */
}

table button {
  background-color: #b9b6b6; /* Color del botón dentro de la tabla */
  color: white;
  padding: 8px 14px;
  font-size: 14px;
  margin-right: 6px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

table button:hover {
  background-color: #888888; /* Oscurece el botón al pasar el cursor por encima */
}

@media (max-width: 768px) {
  .container {
    padding: 20px; /* Reduce padding en dispositivos pequeños */
  }

  table {
    font-size: 14px; /* Texto ligeramente más pequeño en pantallas pequeñas */
  }

  form {
    grid-template-columns: 1fr; /* Campos del formulario apilados verticalmente en móviles */
  }
}

.button-inicio {
  background-color: #9e9e9e; /* Fondo gris del botón de inicio */
  color: white; /* Texto blanco */
  padding: 8px 14px; /* Espaciado interno */
  font-size: 14px;
  margin-right: 6px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none; /* Quita subrayado del enlace */
}

.button-inicio:hover {
  background-color: #6e6e6e; /* Oscurece el botón cuando se pasa el cursor */
}
