@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html, body {
    height: 100%; /* Asegúrate de que html y body ocupen el 100% de la altura */
    margin: 0; /* Elimina márgenes predeterminados */
    display: flex;
    flex-direction: column; /* Organiza el contenido en columna */
}

.container {
    flex: 1; /* Permite que la .container ocupe el espacio restante */
}
.encabezado {
    margin:50px;
}
.encabezado h1 {
        color: #0E2B6D;
    font-size: 35px;
    font-style: italic;
    margin: 0;
    text-align: center;
    font-weight: 500;
    padding: 15px;

}

.sub-caja-subtitulo{
   background: #ededed59;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    border-radius: 20px;
        margin-top: 60px;
}


.sub-caja-subtitulo h2{
         color: #0E2B6D;
    font-size: 38px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.sub-caja-subtitulo p{
      color:#000000;
    font-size:18px;
    font-weight:400;
    margin:0;
}
.caja-sub-form{
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-bottom:60px;
}
.input-dni{
   color: #0E2B6D !important;
    border: 1.5176px solid #DADADA !important;
    border-radius: 20px !important;
    padding:10px !important;
}

 .input-dni::placeholder {
            color: #B2B2B2 !important; /* Color del placeholder */
               font-size:18px !important;
    font-weight:400 !important;
    margin:0 !important;
       
        }
        
        .caja-imagen-lupa{
           background: #18A74F;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 10px;
    cursor:pointer;
}
        
        
          .caja-imagen-lupa img{
           width:27px;
           height:27px;
        }
        
        .encabezado-imagenes h3{
            color:#18A74F;
            font-size:38px;
            font-weight:500;
            text-align:center;
            margin:0;
            
        }
        
         .imagen {
            text-align: center; /* Centra la imagen dentro de su contenedor */
            flex: 1;
        }
        .imagen img {
            width: 100%; /* Ajusta el ancho al 100% del contenedor */
            height: 150px; /* Establece una altura fija */
            object-fit: contain; /* Mantiene la proporci贸n de la imagen */
        }
        
        footer{
            border-top:0.5px solid #B2B2B2;
               margin-top: 20px;
        }
        
        .footer{
                display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
  
        }
        
        .footer p{
        color:#000000;
        font-size:15px;
        font-weight:400;
        margin:0;
        }
        
        
        .contenedor-boton{
            display: flex;
    flex-direction: row;
    justify-content: flex-end;
        }
       .btn-whatsapp {
    background: #18A74F;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-radius: 50px;
    gap: 10px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    cursor:pointer;
}
        
        .btn-whatsapp span{
           color:#FFFFFF;
          font-weight:500;
          font-size:17.7px;
        }
        
        
        .btn-whatsapp img{
            width:40px;
            height:40px;
        }
        
        .contenedor-general-todo{
            max-width:1500px !important;
        }
        
        .caja-global-foto{
 display:flex;
 flex-direction:column;
 gap:20px;
}

.caja-general-foto {
    height: 419px;
    position: relative; /* Para posicionar los textos correctamente */
        z-index: 1000;
}

.caja-verde {
    background: #18A74F; /* Color verde */
    background-image: url('https://www.capedu.edu.pe/CampusVirtual/Assets/img/cabecerafoto.png'); /* Imagen de fondo */
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-position: center; /* Centra la imagen en el contenedor */
    width: 100%;         /* Ancho completo del contenedor */
    height: 40%;         /* Ocupa el 40% del alto del contenedor */
    border-radius: 18px 18px 0 0; /* Esquinas redondeadas en la parte superior */
    position: relative;
}

.foto-container {
  position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 192px;
    height: 192px;
    overflow: hidden;
    border-radius: 50%;
    z-index: 1000;
    cursor:pointer;
}



.foto-circular {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el contenedor */
}
.camara-container {
    position: absolute; /* Permite que se superponga a la imagen */
    top: 50%; /* Centra verticalmente en el contenedor de la foto */
    left: 50%; /* Centra horizontalmente en el contenedor de la foto */
    transform: translate(-50%, -50%); /* Ajusta para centrar */
  width: 47px;
    height: 47px;
    z-index: 2000; /* Asegúrate de que esté sobre la foto */
    cursor:pointer;
    display:none;
}

.camara-container svg{
  width: 47px;
    height: 47px;
}
.caja-blanca {
    background: #fff;
    width: 100%;
    height: 60%;
    border: 0.8986px solid #040b382b;
    border-radius: 0 0 18px 18px;
    position: relative;
}

.div-estudiante{
  display: flex;
    flex-direction: column;
    padding: 52px;
    margin-top: 60px;
    justify-content: flex-end;

}
.nombre-estudiante h4{
      font-weight: 500;
    color: #333333;
    font-size: 31px;
    text-align: center;

}

.dni-estudiante{
       background: #18A74F;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.dni-estudiante span{
    color:#fff;
    font-weight:500;
    font-size:16px;
}
.dni-estudiante input{
         color: #fff;
    font-weight: 500;
    font-size: 18.5px;
    background: none;
    border: none;
    width: 25%;
}

.caja-qr{
     display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 0px;
    border: 0.8986px solid #040b382b;
    border-radius: 18px;
    padding: 3px 10px;
}

.info-qr p{
    color:#18A74F;
    font-size:18px;
    font-weight:600;
    margin:0;
}

.info-qr span{
    color:#333333;
    font-size:18px;
    font-weight:600;
       margin:0;
}
.lista-certificados{
        display: flex;
    flex-direction: column;
    gap: 20px;
}
.certificado {
    border: 1.687px solid #040b382b;
    padding: 20px;
    border-radius: 18px;
}
.certificado span{
    margin:0;
    font-weight:600;
    font-size:18px;
    color:#333333;
}
.certificado p{
    margin:0;
    font-weight:400;
    font-size:18px;
    color:#333333;
}
.titulo-certificado{
    margin-bottom: 12px;
}
.titulo-certificado span{
     margin:0;
    font-weight:600;
    font-size:18px;
    color:#18A74F;
}

.barra-verde{
    background: #18A74F;
    height: 4px;
    border-radius: 20px;
    width: 4%;
}

.span-green{
    color:#18A74F !important;
    
}
.info-principal{
display: flex;
    align-items: center;
    gap: 50px;
}
.info-secundaria{
    margin-top:40px;
}
.imagen-logo{
    display:flex;
    align-items:center;
    justify-content:center;
}
.imagen-logo img {
    width: 75%;
    height: auto;
    max-height: 100px;
}
.relative-div{
    position:relative;
    height:100%;
}

.sticky-div{
    position:sticky;
    top:50px;
}

   
        .caja-titulo{
            max-width:1500px !important;
        }
        
        
.caja-titulo h2 a {
    color: #33333385 !important;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0px;
    text-decoration: none;
}
@media (max-width: 400px) {
    .encabezado {
        margin: 20px; /* Reducido */
    }
    
    .encabezado h1 {
        font-size: 24px; /* Reducido */
        padding: 10px; /* Reducido */
    }

    .sub-caja-subtitulo {
        padding: 10px; /* Reducido */
        margin-top: 30px; /* Reducido */
    }

    .sub-caja-subtitulo h2 {
        font-size: 28px; /* Reducido */
    }

    .sub-caja-subtitulo p {
        font-size: 16px; /* Reducido */
    }

    .caja-sub-form {
        flex-direction: column; /* Cambia a columna para mejor ajuste */
        gap: 10px; /* Reducido */
    }

    .input-dni {
        padding: 8px; /* Reducido */
        font-size: 16px; /* Reducido */
    }

    .caja-imagen-lupa {
        padding: 8px; /* Reducido */
    }

    .encabezado-imagenes h3 {
        font-size: 24px; /* Reducido */
    }

    .imagen img {
        height: 120px; /* Reducido */
    }

    footer {
           
        padding: 15px; /* Reducido */
    }
 
    .footer p {
        font-size: 14px; /* Reducido */
    }

    .btn-whatsapp {
        padding: 8px 10px; /* Reducido */
        bottom: 5px; /* Ajuste para pantalla pequeña */
        right: 5px; /* Ajuste para pantalla pequeña */
    }

    .btn-whatsapp span {
        font-size: 15px; /* Reducido */
    }

    .btn-whatsapp img {
        width: 35px; /* Reducido */
        height: 35px; /* Reducido */
    }
}


@media (max-width: 991px) {
    
    .imagen-logo {
        display: block !important;
    }
    
.contenedor-display{
        display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
      margin:10px;
}
    .ladoizquierdofoto{
        width:100% !important;
    }
    
      .ladoderechofoto{
        width:100% !important;
    }
    
    .nombre-estudiante h4 {
    font-weight: 500;
    color: #333333;
    font-size: 20px;
    text-align: center;
}
.dni-estudiante span {
    color: #fff;
    font-weight: 500;
    font-size: 15px;
}

.info-qr p {
    color: #18A74F;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.info-qr span {
    color: #333333;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}
.info-principal {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-direction:column;
}
.titulo-certificado span {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: #18A74F;
}
.certificado span {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
}

.certificado p {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
  
}
.imagen-logo img {
    width: 100%;
    height: auto;
    max-height: 100px;
}

    .header-img img {
        width: 60% !important;
        height: auto !important;
    }
}