/* Reset general */
body, div, p, table {
  margin: 0;
  padding: 0;
}

/* Estilos para el encabezado */
header {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #004884;
  margin-bottom: 2rem;
  text-align: center;
}

header h1 {
  color: white;
  font-size: 2rem;
  width: 100%;
}

header h4 {
  color: white;
  width: 100%;
}

/* Estilos para la sección principal */
section {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 1rem;
}

section .col-md-6 {
  width: 50%;
  padding: 0 15px;
}

section .formulario {
  display: flex;
  justify-content: center;
  width: 100%;
}

section .formulario select {
  background-color: #004884; /* Color principal */
  color: white;
  border-radius: 25px;
  border: 1px solid white;
  padding: 10px;
  width: 60%; /* Ajusta el ancho del select */
}

section .formulario input[type=submit] {
  background-color: #004884; /* Color principal */
  color: white;
  border-radius: 25px;
  border: 1px solid white;
  padding: 10px;
  width: 25%; /* Ajusta el ancho del botón */
  margin-left: 1rem; /* Añade un margen a la izquierda */
}

section table.product {
  border: 1px solid #004884; /* Color principal */
  width: 100%; /* Ajusta el ancho */
}

section table.product thead {
  background-color: black; /* Color principal */
  color: white;

}

section table.product tr {
  border: 1px solid #004884; /* Color principal */
}

section table.product tr td {
  border: 1px solid black; /* Color principal */
  color: black;
}

section #resultado h3 {
  text-transform: uppercase;
  text-align: center;
  color: #004884; /* Color principal */
}

/* Estilos para la tabla fija */
.table-container {
  max-height: 590px;
  overflow-y: auto;
}

/* Estilos generales para tablas */
table {
  border-collapse: collapse;
  width: 100%;
}

/* Estilos para las celdas */
th {
  position: sticky;
  top: 0;
  background-color: #004884;
  color: white;
  
}

th,
td {
  padding: 8px;
  border-bottom: 1px solid white;
  text-align: center;
}