.pdf-container {
  display: flex;
  /* 
    - Utiliza flexbox para organizar el contenido dentro de este contenedor.
  */

  flex-direction: column;
  /* 
    - Establece la dirección de los elementos secundarios en una columna.
  */

  align-items: center;
  /* 
    - Centra los elementos secundarios horizontalmente dentro del contenedor.
  */

  justify-content: center;
  /* 
    - Centra los elementos secundarios verticalmente dentro del contenedor.
  */
}

.pdf-viewer {
  border: 1px solid #ccc;
  /* 
    - Añade un borde de 1 píxel sólido de color gris claro alrededor del visor PDF.
  */

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* 
    - Aplica una sombra sutil alrededor del visor PDF para darle profundidad.
  */

  margin-bottom: 20px;
  /* 
    - Añade un margen inferior de 20 píxeles para separar el visor PDF de otros elementos.
  */

  max-width: 100%;
  /* 
    - Limita el ancho máximo del visor PDF al 100% del contenedor, asegurando que no desborde.
  */
}

@media (max-width: 767.98px) {
  .download-btn {
    font-size: 14px;
    /* 
      - Define el tamaño de la fuente del botón de descarga en 14 píxeles para pantallas pequeñas.
    */

    padding: 8px 16px;
    /* 
      - Establece un relleno de 8 píxeles en la parte superior e inferior y 16 píxeles en los lados,
      - aumentando el área del botón para facilitar la interacción en dispositivos móviles.
    */
  }
}

td,
th {
  font-size: 1.2rem;
  /* 
    - Define el tamaño de fuente de las celdas de la tabla (td) y de los encabezados (th) 
    - como ligeramente mayor que el tamaño de fuente pequeño, mejorando la legibilidad.
  */
}

.animated-line {
  animation: expand-line 1s ease-out forwards;
  /* 
    - Aplica una animación llamada "expand-line" que dura 1 segundo y utiliza una transición suave.
    - La propiedad "forwards" mantiene el estado final de la animación.
  */
}

@keyframes expand-line {
  0% {
    width: 0;
    /* 
      - Al inicio de la animación, el ancho es 0, lo que significa que la línea no es visible.
    */
  }

  100% {
    width: 100%;
    /* 
      - Al final de la animación, el ancho se expande al 100%, haciendo que la línea sea completamente visible.
    */
  }
}

@media (max-width: 768px) {
  h2 span {
    display: block;
    /* 
      - Cambia el comportamiento del elemento "span" dentro de los encabezados "h2" para que se comporte como un bloque,
      - permitiendo que ocupe toda la línea.
    */

    padding: 10px;
    /* 
      - Añade un relleno de 10 píxeles al elemento "span" para mejorar el espaciado visual.
    */
  }

  .animated-line {
    width: 80%;
    /* 
      - Define el ancho de la línea animada como 80% en pantallas pequeñas, 
      - manteniendo un espaciado adecuado.
    */
  }
}

.card-custom {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 
    .card-custom:
    - Aplica una transición suave de 0.3 segundos para las propiedades `transform` y `box-shadow`.
    - Facilita un efecto visual agradable al interactuar con la tarjeta.
  */

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  /* 
    - Establece una sombra inicial más notable en la tarjeta para darle un efecto de elevación.
  */

  border: none;
  /* 
    - Elimina el borde alrededor de la tarjeta.
  */

  background-color: #e0f7fa;
  /* 
    - Define un color de fondo celeste claro para la tarjeta.
  */
}

.card-custom:hover {
  transform: scale(1.02);
  /* 
    - Al hacer hover sobre la tarjeta, se escala ligeramente (2% más grande).
  */

  box-shadow: 0 10px 20px rgba(0, 191, 255, 0.5);
  /* 
    - Cambia la sombra al hacer hover, dándole un efecto de elevación más pronunciado con un color celeste.
  */

  cursor: pointer;
  /* 
    - Cambia el cursor a una mano para indicar que es interactivo.
  */
}

.icono-card {
  color: #1255b3;
  /* 
    - Define el color inicial del icono en un azul oscuro.
  */

  transition: color 0.3s ease;
  /* 
    - Aplica una transición suave de 0.3 segundos para el color del icono.
  */
}