@font-face {
  font-family: titulo;
  src: url(../fuente/Ragnaroo.otf);
}

/* Estilos generales */
body {
  font-family: Arial, sans-serif;
  background: #0a0024;
  background: linear-gradient(
    90deg,
    rgba(10, 0, 36, 0.82) 0%,
    rgba(9, 9, 121, 1) 35%,
    rgba(0, 212, 255, 1) 100%
  );
  margin: 0;
  padding: 0;
  height: 100vh;
  /* Asegura que el cuerpo ocupe toda la altura de la pantalla */
}

/* Contenedor principal para las secciones */
.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  max-width: 1800px;
  /* Ajusta el ancho máximo del contenedor */
  margin: 10px;
  height: 920px;
}

@keyframes borderAnimation {
  0% {
    border: 3px solid #007bff;
    border-radius: 10px;
  }

  25% {
    border: 3px solid #28a745;
    border-radius: 10px;
  }

  50% {
    border: 3px solid #ff5733;
    border-radius: 10px;
  }

  75% {
    border: 3px solid #ffc107;
    border-radius: 10px;
  }

  100% {
    border: 3px solid #007bff;
    border-radius: 10px;
  }
}

/* Estilos para la sección del formulario */
.section-form {
  background-color: #ffffff;
  background-image: url(../image/fondo.png);
  padding: 10px 30px;
  /* Aumenta el padding en los lados derecho e izquierdo */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  /* Redondea el borde */
  flex: 1;
  height: 100%;
  /* Asegura que la sección ocupe toda la altura disponible */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Centra los contenidos horizontalmente */
  border: 3px solid;
  /* Disminuye el grosor del borde */
  border-image-slice: 1;
  animation: borderAnimation 4s infinite linear;
  /* Aplica la animación al borde */
  max-width: 560px;
}

.content-1 {
  text-align: center;
}

.logo-cont img {
  max-width: 200px;
  /* Aumenta el tamaño del logo */
  margin-bottom: 10px;
}

.titulo h1 {
  font-size: 25pt;
  color: #082359;
  text-align: center;
  text-shadow: 0.1em 0.1em 0.2em #b9bbbb;
  font-weight: bold;
  font-family: titulo;
}

.mensaje h5 {
  font-size: 16px;
  color: #808180;
  margin-bottom: 20px;
}

.form-consult form {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-color: #808180;
}

.form-consult input {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #808180;
  border-radius: 4px;
  width: 80%;
  border-color: #808180;
  background-color: transparent;
}

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

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

.Descargar-cert button {
  padding: 10px 20px;
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 15px;
}

.Descargar-cert button:hover {
  background-color: #218838;
}

/* Estilos para la sección del certificado */
.section-cert {
  background-color: #ffffff;
  background-image: url(../image/fondo.png);
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* Redondea el borde */
  flex: 1;
  height: 100%;
  /* Asegura que la sección ocupe toda la altura disponible */
  border: 3px solid;
  /* Disminuye el grosor del borde */
  border-image-slice: 1;
  animation: borderAnimation 4s infinite linear;
  /* Aplica la animación al borde */
  display: flex;
  align-items: center;
  /* Centra los contenidos horizontalmente */
  justify-content: center;
}

/* .estado-consult {
        margin-bottom: 20px;
      } */

.conenido-cert embed {
  width: 960px;
  /*anchura*/
  height: 730px;
  /*altura*/
  /* width: 100%; */
  /* height: auto; */
  border: 1px solid #ccc;
  border-radius: 4px;
}

#certi_as {
  display: flex;
}

h2 {
  color: #28a745;
  font-size: 15pt;
  text-shadow: 0.1em 0.1em 0.2em #b9bbbb;
  font-weight: bolder;
}

.error {
  color: #dc3545;
  text-shadow: 0.1em 0.1em 0.2em #b9bbbb;
  text-align: center;
}

h3 a {
  font-size: 11pt;
  text-decoration: none;
  color: #808180;
}

h3 a:hover {
  font-size: 11pt;
  text-decoration: none;
  color: #0056b3;
}

.designer:hover {
  color: #0056b3;
  font-weight: bold;
}

.resultado-consulta {
  background-color: #eeeded;
  box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.3);
  text-align: left;
  font-weight: bold;
  font-size: 12pt;
  padding: 15px;
  padding-left: 30px;
  color: #808180;
  text-shadow: 0.1em 0.1em 0.2em #b9bbbb;
  margin-top: 15px;
}

.resultado-consulta i {
  color: #808180;
  margin-right: 15px;
  line-height: 1.4;
}

#codigo_certificado {
  border: 3px solid;
  color: #666;
}

.copy {
  text-align: center;
  padding-top: 10px;
  color: #808180;
}

.copy h4 {
  text-shadow: 0.1em 0.1em 0.2em #b9bbbb;
  font-weight: bold;
}

.copy a {
  text-decoration: none;
  color: #808180;
}

.copy a:hover {
  color: #0056b3;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: center;
    padding: 10px;
    height: auto;
    display: flex;
  }

  .section-form,
  .section-cert {
    width: 90%;
    max-width: 600px;
    padding: 15px;
    min-height: 650px;
  }

  .section-form {
    height: 1000px;
  }

  .titulo h1 {
    font-size: 20px;
  }

  .mensaje h5 {
    font-size: 14px;
    text-align: center;
  }

  .form-consult input {
    width: 92%;
    font-size: 16px;
  }

  .form-consult button,
  .Descargar-cert button {
    width: 100%;
    font-size: 16px;
    padding: 12px;
  }

  .conenido-cert embed {
    width: 100%;
    height: auto;
  }

  .resultado-consulta {
    font-size: 14px;
    padding: 15px;
  }

  .copy h4,
  .copy p {
    font-size: 12px;
    text-align: center;
  }
}