html,body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f8f9fa;
  color: #333;
}

/* Contenedor principal */
.page-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* para que el contenido empiece desde arriba */
  align-items: center;
  min-height: 100vh; /* ocupa toda la altura de la pantalla */
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px; /* evita que toque los bordes en móviles */
}

/* Ajuste de las secciones */
.seccion_superior, .seccion_inferior {
  width: 100%;
  display: flex;
  flex-direction: column;   /* alineación vertical interna */
  justify-content: center;
  align-items: center;
}

.seccion_superior
{
  height: 250px; /* Ajusta según quieras */
  background-image: url('foto_pozo.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
  text-align: center;
}

.seccion_superior h1 {
  font-size: clamp(20px, 5vw, 40px);
  text-align: center;
}

.seccion_inferior {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* mejor para que el contenido empiece desde arriba */
  flex-direction: column;   /* para contenido vertical */
  background-image: url('banner.png');
  background-size: cover;
  background-position: center;
  min-height: calc(84vh - 250px);
  padding: 120px 0 30px;
}

.seccion_inferior::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;       /* altura completa de la sección */
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1;
}

.seccion_inferior > .container {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 800px;
}

.container {
  width: 90%;
  max-width: 800px;
  margin: -400px auto 30px;
  background: rgb(255, 255, 255);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  position: relative;
  min-height: 60vh;
  align-items: center;
}

#searchForm {
  display: flex;
  flex-direction: column; /* uno debajo del otro */
  gap: 5px;
  align-items: center;    /* centra horizontalmente */
  text-align: center;     /* centra el texto dentro de inputs/labels */
  width: 100%;
}

#searchForm input[type="text"],
#searchForm select,
#searchForm button {
  width: 90%;          /* ancho relativo */
  max-width: 400px;    /* límite en pantallas grandes */
  padding: 12px;
  font-size: clamp(14px, 2.5vw, 18px);
  box-sizing: border-box;
  align-items: center;
}

#pagination {
  display: flex;
  justify-content: center; /* centra horizontalmente */
  gap: 5px;               /* espacio entre botones */
  margin-top: 20px;        /* separación respecto al contenido anterior */
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background: #eee;
}

p{
  font-size: clamp(14px, 2.5vw, 18px);
}

@media(max-width:600px)
{
  .container
  {
    width: 95%;
    padding: 15px;
  }
}
h1{
  font-size: clamp(20px,5vw,25px);
}

p{
  font-size: clamp(14px,2.5vw,24px);
}

@media (max-width: 480px) {
  #searchForm input,
  #searchForm select,
  #searchForm button {
    flex: 1 1 100%; /* ocupan toda la fila */
    max-width: none;
  }
}

.titulo-con-imagen {
  display: flex;
  align-items: center;  /* centra verticalmente la imagen y el texto */
  gap: 5px;            /* espacio entre imagen y texto */
  justify-content: center; /* centra horizontalmente en el contenedor */
  flex-wrap: wrap;    /* en móviles, imagen y texto pueden ir en filas separadas */
  text-align: center;
}

.logo-titulo {
  width: 30vw;           /* ajusta el tamaño de la imagen */
  max-width: 200px;
  min-width: 50px;
  height: auto;
}

@media (max-width: 480px) {
  .logo-titulo {
    width: 20vw;       /* un poco más grande proporcionalmente en móviles */
  }
  .titulo-con-imagen {
    flex-direction: column; /* imagen arriba, texto debajo */
    gap: 5px;
  }
}

.titulo-con-imagen h1 {
  font-size: clamp(20px, 5vw, 40px); /* tamaño de texto responsive */
  margin: 0;                          /* elimina margen por defecto */
  padding: auto;
}
@media (max-width: 480px) {
  .titulo-con-imagen {
    flex-direction: column;  /* logo arriba, texto debajo */
    gap: 5px;                /* espacio reducido */
  }
}

button {
  padding: 12px 25px;
  margin: 5px;
  font-size: clamp(14px, 2.5vw, 18px);
  cursor: pointer;
  background-color: #8A1D43; /* verde */
  color: #fff;
  border: none;
  border-radius: 50px;       /*tipo píldora */
  transition: background 0.3s ease, transform 0.2s ease;
}

button:hover {
  background-color: #8A1D43; 
  transform: scale(1.05);
}


.btn-descargar {
  padding: 12px 25px;
  margin: 5px;
  font-size: clamp(14px, 2.5vw, 18px);
  cursor: pointer;
  background-color: #004037; /* verde */
  color: #fff;
  border: none;
  border-radius: 50px;       /*tipo píldora */
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-descargar:hover {
  background-color: #004037; 
  transform: scale(1.05);
}
/* Hacer que la página ocupe toda la altura */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Contenedor principal */
.page-wrapper {
  display: flex;
  flex-direction: column;    /* elementos uno debajo de otro */
  justify-content: center;   /* centra verticalmente */
  align-items: center;       /* centra horizontalmente */
  min-height: 100vh;         /* al menos altura de la ventana */
}

/* Ajuste de las secciones */
.seccion_superior, .seccion_inferior {
  width: 100%;
  display: flex;
  flex-direction: column;   /* alineación vertical interna */
  justify-content: center;
  align-items: center;
}

/* Redondear inputs y selects del formulario */
#searchForm input[type="text"],
#searchForm select {
  border-radius: 20px;  /* puedes cambiar 10px por el radio que prefieras */
  border: 1px solid #ccc; /* opcional, define el borde */
  padding: 10px;
  box-sizing: border-box;
}

/* Si quieres que los inputs se vean consistentes con los botones */
#searchForm button {
  border-radius: 10px; /* mismo radio que los inputs */
}