/* Reset básico */
* {
  margin: 0; /* Elimina márgenes por defecto */
  padding: 0; /* Elimina relleno por defecto */
  box-sizing: border-box; /* Asegura que el padding y border no aumenten el tamaño total */
  font-family: "Segoe UI", sans-serif; /* Fuente predeterminada para todo el documento */
}

body {
  background-color: #f2f2f2; /* Color de fondo claro para todo el cuerpo del sitio */
  color: #1a1a1a; /* Color de texto principal */
  scroll-behavior: smooth; /* Desplazamiento suave al navegar entre secciones */
}

.container {
  max-width: 1200px; /* Ancho máximo del contenedor */
  margin: 60px auto; /* Centra el contenedor vertical y horizontalmente */
  padding: 40px 20px; /* Espaciado interno arriba/abajo 40px, izquierda/derecha 20px */
  background: #fff; /* Fondo blanco para el contenido */
  border-radius: 16px; /* Bordes redondeados */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Sombra suave alrededor del contenedor */
}

h2 {
  font-size: 28px; /* Tamaño del título */
  color: #222; /* Color del texto más oscuro que el texto general */
  margin-bottom: 24px; /* Espacio debajo del título */
  text-align: center; /* Centra el texto */
  font-weight: 600; /* Negrita moderada */
  font-family: "Playfair Display", serif; /* Tipografía elegante para títulos */
}

form {
  display: grid; /* Usa grid layout para organizar los campos */
  gap: 14px; /* Espacio vertical entre los campos */
  margin-bottom: 40px; /* Espacio debajo del formulario */
}

form input,
form select {
  padding: 12px; /* Espaciado interno en los campos */
  border: 1px solid #ccc; /* Borde gris claro */
  border-radius: 8px; /* Bordes redondeados en campos */
  font-size: 15px; /* Tamaño del texto dentro de inputs */
  width: 100%; /* Ocupa todo el ancho disponible */
}

form button {
  background-color: #9e9e9e; /* Color de fondo gris medio */
  color: white; /* Color del texto en el botón */
  border: none; /* Sin borde */
  padding: 14px; /* Espaciado interno */
  font-size: 16px; /* Tamaño del texto */
  border-radius: 8px; /* Bordes redondeados */
  cursor: pointer; /* Cursor en forma de mano al pasar el mouse */
  transition: background 0.3s ease; /* Transición suave del fondo al hacer hover */
}

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

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

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

table th {
  background-color: #b9b6b6; /* Fondo gris claro para los encabezados */
  color: white; /* Texto blanco */
  text-transform: uppercase; /* Convierte el texto a mayúsculas */
}

table tr:nth-child(even) {
  background-color: #f9f9f9; /* Alterna el color de fondo en filas pares para mayor legibilidad */
}

table td form {
  display: inline; /* Evita que el formulario rompa el flujo horizontal en celdas */
}

table button {
  background-color: #b9b6b6; /* Botones de acción gris claro */
  color: white;
  padding: 8px 14px;
  font-size: 14px;
  margin-right: 6px; /* Espacio entre botones */
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

table button:hover {
  background-color: #888888; /* Efecto hover más oscuro en botones dentro de la tabla */
}

@media (max-width: 768px) {
  .container {
    padding: 20px; /* Menor padding en pantallas pequeñas */
  }

  table {
    font-size: 14px; /* Reduce tamaño de texto para adaptarse mejor al espacio */
  }

  form {
    grid-template-columns: 1fr; /* Muestra los campos en una sola columna en móviles */
  }
}

.button-inicio {
  background-color: #9e9e9e; /* Estilo gris uniforme para el botón de volver al inicio o cerrar sesión */
  color: white;
  padding: 8px 14px;
  font-size: 14px;
  margin-right: 6px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none; /* Quita subrayado de enlaces */
}

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