:root {

    /**
     * colors
     */
  
    --iteazul: #072D70;
    --iteverde: #A4C639;
    --itefondo: #E1E1E1;
    --dark: #000;
    --violet-blue-crayola: hsla(234, 50%, 64%, 1);
    --dark-cornflower-blue_a7: hsla(214, 88%, 27%, 0.07);
    --white: hsla(0, 0%, 100%, 1);
    --white_a3: hsla(0, 0%, 100%, 0.03);
    --white_a8: hsla(0, 0%, 100%, 0.08);
    --white_a12: hsla(0, 0%, 100%, 0.12);
    --white_a70: hsla(0, 0%, 100%, 0.7);
    --cultured: hsla(220, 20%, 97%, 1);
    --lavender-web: hsla(233, 52%, 94%, 1);
    --cadet-blue-crayola: hsla(220, 12%, 70%, 1);
    --cadet-blue-crayola_a20: hsla(222, 23%, 71%, 0.2);
    --charcoal: hsla(218, 22%, 26%, 1);
    --raisin-black: hsla(216, 14%, 14%, 1);
    --light-gray: hsla(0, 0%, 79%, 1);
    --black-coral: hsla(220, 12%, 43%, 1);
  
    /**
     * typography
     */
  
    --ff-manrope: 'Poppins', sans-serif;
  
    --fs-1: calc(2.7rem + 1.38vw);
    --fs-2: calc(2.6rem + .66vw);
    --fs-3: 2.2rem;
    --fs-4: 1.9rem;
    --fs-5: 1.8rem;
    --fs-6: 1.7rem;
    --fs-7: 1.5rem;
    --fs-8: 1.4rem;
    
    --fw-700: 700;
  
    /** 
     * spacing
     */
  
    --section-padding: 90px;
  
    /**
     * box shadow
     */
  
    --shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
    --shadow-2: 0 0 0 0.05rem hsla(214, 88%, 27%, 0.08), 0 0 1.25rem hsla(216, 14%, 14%, 0.06);
    --shadow-3: 0 0 1.25rem hsla(216, 14%, 14%, 0.04);
  
    /**
     * border radius
     */
  
    --radius-circle: 50%;
    --radius-pill: 100px;
    --radius-10: 10px;
    --radius-8: 8px;
    --radius-6: 6px;
  
    /**
     * transition
     */
  
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --transition-3: 0.3s ease-in-out;
  
  }
  
  /*-----------------------------------*\
    #ETIQUETAS
  \*-----------------------------------*/
  
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  li { list-style: none; }
  
  a,
  img,
  span,
  input,
  button,
  ion-icon { display: block; }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  img { height: auto; }
  
  input,
  button {
    background: none;
    border: none;
    font: inherit;
  }
  
  input { width: 100%; }
  
  button { cursor: pointer; }
  
  ion-icon { pointer-events: none; }
  
  address { font-style: normal; }
  
  html {
    font-family: var(--ff-manrope);
    font-size: 10px;
    scroll-behavior: smooth;
  }
  
  main{
    margin-top: 7em;
  }
  
  body {
    background-color: var(--white);
    color: var(--black-coral);
    font-size: 1.6rem;
    line-height: 1.7;
  }

/*-----------------------------------*\
  # CERTIFICADO
\*-----------------------------------*/

 
.busqueda-certi .container{
  max-width: 80%;
 }
 
 .busqueda-certi{
   color: black;
 }
 .busqueda-certi h2 {
   color: var(--iteazul);
   font-size: 25px;
 }
 
 .busqueda-certi h3 {
   color: #444444;
 }
 
 .busqueda-certi input[type="text"] {
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   width: 100%; /* Ancho completo por defecto */
   max-width: 300px; /* Máximo ancho para mantener el diseño */
   box-sizing: border-box; /* Incluir padding y borde en el ancho total */
 }
 
 .btn-consultar {
   margin-top: 10px;
   padding: 10px 15px;
   background-color: #ccc;
   color: #333;
   border: none;
   border-radius: 4px;
   cursor: pointer;
 }
 
 .btn-consultar:hover {
   background-color: var(--iteverde);
   color: white;
 }
 
 /* Media query para pantallas más grandes (mínimo 768px) */
 @media (min-width: 768px) {
   .busqueda-certi {
     margin-top: 12em;
     margin-bottom: 10em;
     
   }
 
   .busqueda-certi h2 {
     font-size: 45px;
   }
 
   .busqueda-certi h3 {
     font-size: 27px;
   }
 
   .busqueda-certi h4 {
     font-size: 25px;
 }
 
 
 .busqueda-certi p{
   font-size: 21px;
   color: #ffffff;
   font-weight: 800;
 }
 
 .busqueda-certi p strong{
   color: #000000;
   font-size: 25px;
 }
 
 .busqueda-certi strong{
   font-size: 19px;
   color: var(--iteazul);
   font-weight: 600;
 }
 
 
 
 .busqueda-certi h4 strong{
   font-size: 25px;
 }
 
 /* Estilos para estado 'APROBADO' */
 .busqueda-certi .label_gray.aprobado {
   display: inline-block;
   background-color: green;
   border-radius: 10px;
   padding: 5px;
   color: white;
 }
 
 /* Estilos para estado 'DESAPROBADO' */
 .busqueda-certi .label_gray.desaprobado {
   display: inline-block;
   background-color: red;
   border-radius: 10px;
   padding: 5px;
   color: white;
 }
 
 
 
   /* Ajuste del ancho del input */
   .busqueda-certi input[type="text"] {
     width: 30%; /* Cambiar el ancho según tus necesidades */
     max-width: 100%; /* Ancho máximo */
   }
 
   .btn-consultar {
     margin-top: 0; /* Eliminar el margen superior adicional */
   }
 }
 
 /* Media query para pantallas más pequeñas (máximo 768px) */
 @media (max-width: 768px) {
   .busqueda-certi {
     margin-top: 5em;
   }
 
   .busqueda-certi p{
     color: #ffffff;
 
   }
 
   .busqueda-certi p strong{
     color: #000000;
 
   }
 
   /* Estilos para estado 'APROBADO' */
 .busqueda-certi .label_gray.aprobado {
   display: inline-block;
   background-color: green;
   border-radius: 10px;
   padding: 5px;
   color: white;
 }
 
 /* Estilos para estado 'DESAPROBADO' */
 .busqueda-certi .label_gray.desaprobado {
   display: inline-block;
   background-color: red;
   border-radius: 10px;
   padding: 5px;
   color: white;
 }
 
   /* Ajustes adicionales si es necesario para pantallas pequeñas */
 }
 
 @media (max-width: 768px) {
   .busqueda-certi h2 {
     font-size: 30px;
 
   }
 
   .busqueda-certi h3 {
     font-size: 17px;
   }
 
   .busqueda-certi h4 {
     font-size: 20px; 
 }
 
 
 
 .busqueda-certi p{
   font-size: 17px;
   color: #ffffff;
   font-weight: 800;
 }
 
 .busqueda-certi strong{
   font-size: 17px;
   color: var(--iteazul);
   font-weight: 600;
 }
 
 .busqueda-certi span {
   font-size: 17px;
   display: inline-block; /* Hace que el span se comporte como un bloque en línea */
   background-color: var(--iteverde); /* Establece el color de fondo del contenedor */
   border-radius: 10px;
   padding: 5px; /* Ajusta el relleno alrededor del contenido */
   color: white; /* Establece el color del texto dentro del span */
 }
 
 }
 
 /* Estilo para ocultar el ícono de carga por defecto */
 .hide {
   display: none;
 }
 
 
 
 .section-course-complete{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 }
 
 
  .table-sections {
   margin-bottom: 20px;
   width: 33%;
   position: relative;
   padding: 20px;
   height: auto;
   justify-content: center;
 } 
 
 
 /* Estilo solo para la tabla con la clase .course-table */
 .course-table {
   border-collapse: separate; /* Usar borde separado para aplicar border-radius */
   border: 2px solid var(--iteazul); /* Grosor del borde de la tabla */
   width: 100%; /* Ancho completo de su contenedor */
   height: 100%;
   text-align: center; /* Alinear contenido de la tabla al centro */
   background-color: #ffffff;
   border-radius: 10px; /* Radio de borde para hacerlo redondeado */
   margin: 0 auto; /* Centrar la tabla horizontalmente */
 }
 
 
 
 
 .course-table td {
   padding: 10px; 
   vertical-align: top; 
 }
 
 
 .wrapper_course_search {
   padding: 10px; 
 }
 
 .section_course_search {
   margin-bottom: 10px; 
 }
 
 .title_course_search, .title_certificate_search {
   font-weight: bold; 
 }
 
 
 .title_course_search {
   background-color: #072D70; 
   color: white;
   border: 2px solid #000; 
   padding: 10px; 
   margin-bottom: 10px;
   width: 100%; 
   box-sizing: border-box; 
 }
 
 
 @media (max-width: 1508px) {
 
 
   .table-sections {
     margin-bottom: 20px;
     width: 50%;
     position: relative;
     padding: 20px;
     height: auto;
     justify-content: center;
   } 
 
 
 
   /* Estilos para la tabla */
   .course-table {
     border-collapse: separate; /* Usar borde separado para aplicar border-radius */
     border: 2px solid var(--iteazul); /* Grosor del borde de la tabla */
     width: 100%; /* Ancho completo de su contenedor */
     height: 100%;
     text-align: center; /* Alinear contenido de la tabla al centro */
     background-color: #ffffff;
     border-radius: 10px; /* Radio de borde para hacerlo redondeado */
     margin: 0 auto; /* Centrar la tabla horizontalmente */
   }
   
   
   .course-table td {
     padding: 10px; 
     vertical-align: top; 
   }
   
   
   .wrapper_course_search {
     padding: 10px; 
   }
   
   .section_course_search {
     margin-bottom: 10px; 
   }
   
   .title_course_search, .title_certificate_search {
     font-weight: bold; 
   }
   
   
   .title_course_search {
     background-color: #072D70; 
     color: white;
     border: 2px solid #000; 
     padding: 10px; 
     margin-bottom: 10px;
     width: 100%; 
     box-sizing: border-box; 
   }
 
 }
 
 

 @media (max-width: 968px) {
 
   .busqueda-certi .container{
     max-width: 100%;
    }
 
   .table-sections {
     margin-bottom: 10px;
     width: 100%;
   } 
 
   /* Estilos para la tabla */
 .course-table {
   border-collapse: separate; /* Usar borde separado para aplicar border-radius */
   border: 2px solid var(--iteazul); /* Grosor del borde de la tabla */
   width: 100%; /* Ancho de la tabla (ajustar según tus necesidades) */
   text-align: center;
   background-color: #ffffff;
   border-radius: 10px; /* Radio de borde para hacerlo redondeado */
 }
 
 
 }