body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
  padding-top: 15vh; /* Incrementar espacio superior */
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px; /* Reducir padding */
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logo {
  flex: 0 0 18%; /* Reducir tamaño del logo un 10% */
  margin-left: 20px; /* Añadir margen izquierdo */
}

.logo img {
  width: 100%;
  height: auto;
}

.search-bar {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}

.search-bar input {
  padding: 8px; /* Reducir padding */
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

.search-bar button {
  padding: 8px 16px; /* Reducir padding */
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 0 4px 4px 0;
}

.search-bar button:hover {
  background-color: #0056b3;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 90%;
  margin: 20px auto;
}

.pwa-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: left;
  padding: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}

.pwa-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.pwa-portada {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.pwa-info {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
}

.pwa-icon {
  width: 60px; /* Reducir tamaño del icono */
  height: 60px; /* Reducir tamaño del icono */
  background-color: #fff;
  padding: 5px;
  margin-right: 10px;
  border-radius: 8px;
  cursor: pointer;
}

.pwa-details {
  flex: 1;
  text-align: left;
}

.pwa-details h2 {
  font-weight: bold;
  margin: 0;
  cursor: pointer;
}

.pwa-details p {
  margin: 5px 0;
}

.estrella {
  color: #cccccc; /* Color gris por defecto */
  font-size: 1.5em;
  margin-right: 5px;
}

.estrella.active {
  color: #33bc90; /* Color verde para las estrellas activas */
}

.ratings span {
  margin-left: 5px;
  font-size: 1rem;
}

@media (max-width: 1000px) {
  header {
    flex-direction: column;
    align-items: center;
    padding: 10px; /* Reducir padding */
  }

body { margin-top: 10vh; /* Añadir margen superior en unidades de viewport height */ }


  .logo {
    flex: 0 0 40%; /* Ajustar tamaño del logo para móviles */
    text-align: center;
    margin-left: 0; /* Quitar margen izquierdo en móviles */
  }
  .logo img {
  width: 80%;
  text-align: center;
  height: auto;
 }
  .search-bar {
    width: 100%; /* Ajuste para móviles */
    margin-top: 10px;
  }

  .search-bar input {
    width: 80%; /* Ajustar ancho en móviles */
  }

  .container {
    grid-template-columns: 1fr;
  }

  .view-header .view-text {
    font-size: 1.2em; /* Ajustar tamaño del nombre en móviles */
  }

  .view-header .view-subtext {
    font-size: 1em; /* Ajustar tamaño del texto debajo del nombre en móviles */
  }

  .view-main-content {
    padding: 10px; /* Reducir padding */
  }

  .view-screenshots {
    flex-direction: column; /* Cambiar a columna en móviles */
    gap: 10px; /* Ajustar espacio entre imágenes */
  }

  .view-screenshots img {
    width: 100%; /* Ajustar ancho en móviles */
    max-height: 50vh; /* Ajustar el alto máximo en móviles */
  }

  .view-comentario-form input[type="text"],
  .view-comentario-form textarea {
    padding: 10px; /* Ajustar padding */
    font-size: 1.1em; /* Aumentar tamaño de fuente */
  }

  .view-comentario-form button {
    font-size: 1.1em; /* Aumentar tamaño de fuente */
    padding: 10px 20px; /* Ajustar padding */
  }

 .view-comentario {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.view-comentario p {
  margin: 5px 0;
}

.view-comentario .view-stars {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.view-comentario .view-stars span {
  font-size: 20px;
  color: #33bc90; /* Ajusta el color de las estrellas */
  margin-right: 5px;
}

.view-comentario .view-usuario-fecha {
  display: flex;
  justify-content: space-between;
  font-style: italic;
  margin-top: 10px;
}

.view-comentario .view-usuario-fecha .usuario {
  margin-left: 10px;
}

.view-comentario .view-usuario-fecha .fecha {
  margin-right: 10px;
}

  .view-install-button {
    font-size: 1.2em; /* Aumentar tamaño de fuente */
    padding: 10px 20px; /* Ajustar padding */
    background-color: #33bc90;
    color: white;
    border: none;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
    margin: 20px 0;
  }

  .view-install-button:hover {
    background-color: #28a877;
  }

  .view-stars span {
    font-size: 1.5em;
    color: #cccccc;
    cursor: pointer;
  }

  .view-stars span.active {
    color: #33bc90;
  }
}

.view-main-container {
  padding-top: 5vh; /* Ajustar espacio superior */
}

.view-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.view-main-content {
  flex: 2;
  padding: 20px;
  width: 100%;
}

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  text-align: left;
  margin-bottom: 20px;
}

.view-header .view-text {
  font-size: 1.5em; /* Aumentar el tamaño del nombre un 50% */
}

.view-header .view-subtext {
  font-size: 0.7em; /* Reducir el tamaño del texto debajo del nombre al 70% */
}

.view-icono-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.view-icono {
  width: 120%;
  height: auto;
  max-width: 180px; /* Aumentar el tamaño del icono */
  border-radius: 15px;
}

.view-info {
  margin-top: 40px;
  text-align: left;
  background: white;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.view-stars {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.view-stars span {
  font-size: 1.5em;
  color: #cccccc;
  cursor: pointer;
}

.view-stars span.active {
  color: #33bc90;
}

.view-install-button {
  background-color: #33bc90;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 20px 0;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2em;
  text-align: center;
  display: inline-block;
}

.view-install-button:hover {
  background-color: #28a877;
}

.view-screenshots {
  display: flex;
  gap: 10px; /* Ajustar espacio entre imágenes */
  margin-top: 20px;
}

.view-screenshots img {
  width: 48%;
  height: auto;
  max-height: 35vh; /* Ajustar el alto máximo */
  border: 1px solid #ddd;
  border-radius: 5px;
  object-fit: contain; /* Para mantener las proporciones de la imagen original */
  cursor: pointer; /* Indicar que la imagen es clicable */
}

.view-description,
.view-comments,
.view-latest-apps {
  margin-top: 40px;
}

.view-comentario {
  margin-bottom: 20px;
  padding: 10px;
  background: white;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.view-comentario p {
  margin: 5px 0;
}

.view-comentario-form {
  margin-bottom: 40px;
}

.view-comentario-form input[type="text"],
.view-comentario-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.view-comentario-form .view-stars {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.view-comentario-form button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Estilos para el modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
}

.modal img {
  max-width: 100%;
  max-height: 80vh;
}

.modal button {
  margin-top: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

/* Estilos adicionales específicos para view.php */
.view-screenshots {
  display: flex;
  gap: 0; /* Eliminar el espacio entre imágenes */
  justify-content: space-between;
}
.view-screenshots img {
  width: 48%;
  height: auto;
  max-height: 35vh; /* Ajustar el alto máximo */
  border: 1px solid #ddd;
  border-radius: 5px;
  object-fit: contain; /* Para mantener las proporciones de la imagen original */
  cursor: pointer; /* Indicar que la imagen es clicable */
  margin: 0; /* Eliminar márgenes */
  padding: 0; /* Eliminar padding */
}


/*------------------- footer -------------------------*/
footer {
  background-color: transparent;
  color: #333;
  text-align: center;
  padding: 10px; /* Reducir padding */
  width: 100%;
  box-shadow: 0 -1px 2px rgba(0,0,0,0.1); /* Reducir el box-shadow */
}

footer .footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer .logos {
  display: flex;
  justify-content: center;
  margin-bottom: 5px; /* Reducir margen */
}

footer .footer-logo {
  width: 50px; /* Reducir tamaño de los logos */
  height: auto;
  margin: 0 5px; /* Reducir margen entre logos */
}

footer p {
    font-size:.7em;
  margin: 2.5px 0; /* Reducir márgenes */
}

footer a {
  color: #333;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}