/* Estilos generales */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

/* ANIMACION DE BOTON DE RASTREO*/
.cta-button {
  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
  animation: vibrate 1s linear infinite; /* Duración ajustada a 1s */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

@keyframes vibrate {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}


/* Estilos para el banner */
.banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #2196F3;
  color: white;
  text-align: center;
  padding: 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  flex-wrap: wrap;
}

.banner-content {
  display: flex;
  flex-direction: column; /* Cambiado a columna para centrar el contenido verticalmente */
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
}

.banner-logo {
  height: 50px;
  margin-bottom: 10px; /* Cambiado a margen inferior para centrar el contenido verticalmente */
  flex: 0 0 auto;
}

.banner-text {
  flex: 1 1 auto;
  text-align: center; /* Centrar el texto */
  margin-bottom: 10px;
}

.banner-text h2 {
  margin: 0 0 5px;
  font-size: 18px;
}

.banner-text p {
  margin: 0;
  font-size: 13px;
}

.banner-button {
  background-color: #FFC107;
  color: black;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  margin: 10px 0; /* Añadir margen para centrar */
  white-space: nowrap;
}

.banner-close {
  position: absolute;
  top: 10px;
  cursor: pointer;
  font-size: 20px;
  color: white; /* Asegura que la "X" sea blanca para contraste */
  background-color: rgba(0, 0, 0, 0.5); /* Añade un fondo semitransparente para mejor visibilidad */
  padding: 5px;
  border-radius: 50%;
  transform: translateX(-20px); /* Ajusta esto según sea necesario para mover más a la izquierda */
}

/* Estilos responsivos */
@media (max-width: 768px) {
  .banner {
      flex-direction: column;
      padding: 10px;
  }
  .banner-logo {
      margin-right: 0;
      margin-bottom: 10px;
  }
  .banner-text {
      text-align: center;
      margin-bottom: 10px;
  }
  .banner-button {
      margin-left: 0;
  }
  .banner-close {
      right: 10px; /* Ajusta esto para pantallas pequeñas */
  }
}
/*AQUI ACABA EL BANNER DE DESCARGA */




.body-rastreo {
  background-image: url("../images/rep1.jpg"); /* Cambia 'tu-imagen-de-fondo.jpg' con la ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen para cubrir el fondo */
  background-repeat: no-repeat; /* Evita la repetición de la imagen */
  background-attachment: fixed; /* Fija la imagen de fondo */
}

header {
  background-color: #34495E;
  text-align: center;
  padding: 5px 0;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav li {
  display: inline;
  margin-right: 20px;
}

nav a {
  text-decoration: none;
  color: #fff;
}

/* Estilos para la sección hero (portada) */
.hero {
  background-image: url("../images/paqueteria1.jpg"); /* Cambia 'tu-imagen-de-fondo.jpg' por la URL de tu imagen de fondo */
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 100px 0;
  height: 25vh; /* Ajusta la altura según tus necesidades, en este caso, se establece al 50% de la altura de la ventana. */
}

.hero-content {
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  font-size: 36px;
  color: black;
}

p {
  font-size: 14px;
  color: black;
}



footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #34495E;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}
/* Estilos adicionales para dispositivos móviles */
@media (max-width: 768px) {
  .navbar-toggler {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 15px;
  }

  .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;
  }

  .nav-list {
    display: none;
    background-color: #34495E;
    width: 100%;
    position: absolute;
    top: 60px; /* Ajusta la distancia desde la parte superior según tus necesidades */
    left: 0;
    text-align: center;
    padding-top: 10px;
  }

  .nav-list li {
    display: block;
    margin-bottom: 10px;
  }

  .nav-list a {
    font-size: 18px;
  }

  .nav-list.active {
    display: block;
  }
}

header h1 {
  font-size: 36px;
  color: #fff;
}

.rastreo {
  text-align: center;
}

.rastreo .container {
  background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente */
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.rastreo h1 {
  font-size: 28px;
  color: #333; /* Cambia el color del título según tus preferencias */
}

.rastreo p {
  font-size: 18px;
  margin: 20px 0;
  color: #333; /* Cambia el color del texto según tus preferencias */
}

.rastreo form {
  text-align: left;
}

.rastreo label {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
}

.rastreo input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 16px;
}

.rastreo button[type="submit"] {
  background-color: #ff6600;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
}

.rastreo button[type="submit"]:hover {
  background-color: #ff3300;
}

.rastreo .resultado {
  margin-top: 20px;
  font-size: 18px;
  color: #333; /* Cambia el color del texto de resultado según tus preferencias */
}
/* Campo de entrada de texto */
input[type="text"]#numeroguia {
  width: 85%; /* Ocupa todo el ancho disponible */
  max-width: 400px; /* Limita el ancho máximo */
  padding: 12px 20px; /* Espacio interno para mayor legibilidad */
  margin: 10px 0; /* Margen para separarlo de otros elementos */
  border: 1px solid #0056b3; /* Borde sutil */
  border-radius: 25px; /* Bordes redondeados */
  box-sizing: border-box; /* El padding y border no afectan el ancho total */
  font-size: 16px; /* Tamaño de fuente */
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transición suave */
}

/* Estilo al enfocar el campo */
input[type="text"]#numeroguia:focus {
  outline: none; /* Elimina el contorno predeterminado */
  border-color: #0056b3; /* Cambia el color del borde al enfocar */
  box-shadow: 0 0 25px rgba(0, 86, 179, 0.5); /* Sombra aún más grande al enfocar */
}


/* Estilo para el botón */
.cta-button {
  background-color: #0056b3; /* Color de fondo */
  color: white; /* Color del texto */
  padding: 12px 20px; /* Espacio interno */
  border: none; /* Sin bordes */
  border-radius: 25px; /* Bordes redondeados */
  font-size: 16px; /* Tamaño de fuente */
  cursor: pointer; /* Manita al pasar el cursor */
  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out; /* Transiciones suaves */
  margin-top: 10px; /* Margen superior */
}

/* Estilo al pasar el ratón por encima del botón */
.cta-button:hover {
  background-color: #004494; /* Color al pasar el ratón por encima */
  transform: scale(1.05); /* Efecto de agrandamiento */
}

/* Estilo al hacer clic en el botón */
.cta-button:active {
  transform: scale(0.95); /* Efecto de reducción */
}



/* Estilos para el mensaje de alerta */
.alert-hidden {
  display: none; /* Ocultar inicialmente el mensaje de alerta */
}

.alert-show {
  display: block; /* Mostrar el mensaje de alerta */
  background-color: #f44336; /* Fondo rojo para errores */
  color: white; /* Texto en blanco */
  text-align: center; /* Centrar el texto */
  padding: 10px; /* Espaciado alrededor del texto */
  margin: 10px 0; /* Margen arriba y abajo del mensaje */
  border-radius: 5px; /* Bordes redondeados */
}


/* Estilos para el botón de descarga */
button {
  background: linear-gradient(90deg, #007bff, #0056b3); /* Gradiente */
  color: white;
  padding: 8px 16px; /* Tamaño más pequeño */
  border: none;
  border-radius: 30px; /* Bordes más redondeados */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra más pequeña */
  cursor: pointer;
  font-size: 14px; /* Texto más pequeño */
  font-weight: bold;
  transition: all 0.3s ease;
  text-transform: uppercase;
  display: inline-block; /* Alineación en línea */
  margin: 5px; /* Espacio entre los botones */
}

button:hover {
  background: linear-gradient(90deg, #0056b3, #003d7a);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); /* Aumenta sombra en hover */
  transform: translateY(-2px); /* Sutil animación hacia arriba */
}

button:active {
  transform: translateY(1px);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.container {
  text-align: center; /* Alineación centrada para todos los botones */
}