body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #000000;
  }
  
  .Contenedor{
       
      display:grid;
      grid-template-columns: repeat(5,20% 20% 20% 20% 20%);
      grid-template-rows:repeat(1, auto);
      grid-template-areas:"topnav topnav topnav topnav topnav"
                          "publicidad publicidad publicidad publicidad publicidad"
                          "lista lista lista lista form-container "
                          "lista1 lista1 lista1 lista1 form-container "
      ;}

      
.topnav {grid-area: topnav;
    overflow: hidden;
    background-color: #000000;
position: fixed;
width: 100%;
  }
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
    font-weight:600;
  }
  .topnav a:hover {
    background-color: #009de6;
    color: rgb(255, 255, 255);
    text-decoration: underline;
  }

  .topnav .im{
    background-color: #000000;
    color: rgb(255, 255, 255);
   font-size: 9px;
  }
  .topnav .im:hover{
    background-color: #000000;
    color: #009de6;
    text-decoration: underline;
   
  }

  .topnav .im img:hover{
    margin: auto;
    width: 30px;
    
  }
 

  .topnav a.active {
    background-color: #000000;
    color: rgb(255, 255, 255);
  }
  .topnav .icon {
    display: none;
  }


  .portada{grid-area: portada; width: 100%; background-color: #009de6; margin-top: 100px; display: none;}

.lista{grid-area:lista; width: 80%;}

/* Contenedor del formulario */
.form-container {
  grid-area: form-container;
  background-color: #2e2e2e;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 300px;
  width: 100%;
  position: fixed; /* Hacer que el formulario sea fijo */
  top: 20%; /* Distancia desde la parte superior de la ventana */
  left: 85%; /* Centrado horizontalmente */
  transform: translateX(-50%); /* Ajuste para centrar correctamente */
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
  margin-left: 0; /* El margen izquierdo ahora no es necesario */
}


.form-container label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
  color: white;
}

.form-container input, .form-container select {
  width: 80%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-container input:focus, .form-container select:focus {
  border-color: #007BFF;
  outline: none;
}

.form-container button {
  background-color: #007BFF;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 48%;
}

.form-container button:hover {
  background-color: #0056b3;
}

.button-container {
  display: flex;
  justify-content: space-between;
}

.button-container button:nth-child(2) {
  background-color: #f44336;
}

.button-container button:nth-child(2):hover {
  background-color: #d32f2f;
}

/* Responsividad */
@media (max-width: 600px) {
  .form-container {
      width: 100%;
      padding: 15px;
  }

  .button-container {
      flex-direction: column;
      align-items: stretch;
  }

  .button-container button {
      width: 100%;
      margin-top: 10px;
  }
}

/* Estilo general de la lista de empresas */
.lista {grid-area: lista;
  padding: 20px;
  background-color: #000000;
  
}

.lista img{border-radius: 10px;}
.lista img:hover {
 
  transform: scale(1.05);
  transition: transform 0.5s ease-in-out;

}


/* Contenedor para habilitar el scroll con un tamaño fijo */
.table-wrapper {
  width: 100%;
  max-width: 100%; /* Se asegura de que el contenedor no se desborde */
  max-height: 400px; /* Ajusta la altura máxima que deseas para el contenedor */
  overflow: auto; /* Habilita el desplazamiento cuando sea necesario */
  margin-bottom: 20px;

  background-color: rgb(0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra ligera alrededor */
  border-radius: 8px; /* Bordes redondeados para el contenedor */
}

/* Estilo para cada tabla */
table {
  width: 60%;
  margin-bottom: 20px;
  border-collapse: collapse;
  table-layout: fixed; 
}

/* Estilo para las celdas de la tabla */
td, th {
  padding: 15px;
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
  color: #ffffff; 
}

td{border-radius: 10px;}

/* Encabezados de la tabla */
th {
  background-color: #0088ff;
  color: white;
  font-size: 16px;
  font-weight: bold;
  
}

/* Estilo para las filas de la tabla */
tr:nth-child(even) {
  background-color: #343434;
  color: #ddd;
 
  
  
}

/* Estilo para la imagen */
td img {
  border-radius: 8px;
  max-width: 100%;
}

/* Información de la empresa */
td {
  font-size: 14px;
 
}

/* Títulos dentro de cada celda de información */
strong {
  color: #0097e8;
}
.paginacion{
  color: #ccc;
}
/* Estilo para los enlaces */
a {font-size: 21px;
 
  color: #0059ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Estilo general del contenedor de la lista */
.listainterna {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Hacer la tabla responsiva */
@media (max-width: 600px) {
  /* Modificar las celdas para que la tabla sea más fácil de leer en pantallas pequeñas */
  table, td, th {
      display: block;
      width: 100%;
  }

  th {
      background-color: #006cfa;
      color: rgb(255, 255, 255);
      padding: 10px;
      font-size: 14px;
  }

  td {
      padding: 10px;
      text-align: left;
  }

  td::before {
      content: attr(data-label);
      font-weight: bold;
      color: #4CAF50;
  }



  /* Añadir un borde debajo de cada fila para mayor claridad en dispositivos móviles */
 

  /* Mejorar la presentación de los enlaces */
  a {
      font-size: 12px;
  }
}

/* Asegurarse de que la imagen no se desborde y se ajuste a pantallas pequeñas */
@media (max-width: 600px) {
 th{display: none;}
}



.publicidad{grid-area: publicidad; width: 100%; height: 400px; background-color: #000000; margin: auto; text-align: center;}
.publicidad h1{color: white; margin-top: 100px; font-size: 30px;}
.publicidad img{margin-top:10px;}
.publicidad img{border-radius: 10px;}
.publicidad img:hover {
 
  transform: scale(1.05);
  transition: transform 0.5s ease-in-out;

}

@media screen and (max-width: 900px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


  @media screen and (max-width: 900px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }

.topnav.responsive{
width: 100%; margin: auto; 
}
  }


  @media (max-width:900px){
    .Contenedor{ 
    width:100%;
    display:grid;
    grid-gap:0px;
    grid-template-columns: repeat(1, 100%);
    grid-template-rows:repeat(3, auto);
    grid-template-areas:"topnav"
                        "portada"
                        "publicidad"
                        "form-container"
                        "lista"
                       
                        
    ;}
    .topnav .im{ font-size: 20px;
    
    }
    .topnav a{ display: none;}
    .topnav{width: 100%;}
    .lista{grid-area:lista; width: 90%;}
    .form-container {
      background-color: #2e2e2e;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      max-width: 300px;
      width: 90%; /* Adaptable a pantallas pequeñas */
      position: relative;
      top: 20px; /* Distancia desde el borde superior */
      left: 50%; /* Centrado horizontal */
      transform: translateX(-50%); /* Centra perfectamente */
      z-index: 1000; /* Asegura que esté por encima de otros elementos */
      margin-left: 0;
      grid-area: form-container; /* Asegura que el formulario siga en el área definida en el grid */
    }
    tr:nth-child(even) {
      background-color: #000000;
      color: #ddd;
     
      
      
    }



}