.pdf-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 
    .pdf-container:
    - El contenedor utiliza Flexbox para organizar su contenido.
    - `flex-direction: column;` asegura que los elementos dentro del contenedor se coloquen en una columna (uno debajo del otro).
    - `align-items: center;` alinea los elementos horizontalmente al centro del contenedor.
    - `justify-content: center;` alinea los elementos verticalmente al centro del contenedor.
  */
}

.pdf-viewer {
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  max-width: 100%;
  /*
    .pdf-viewer:
    - Añade un borde gris claro alrededor del visor PDF.
    - `box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);` aplica una sombra sutil alrededor del visor para darle un efecto de elevación.
    - `margin-bottom: 20px;` añade un margen de 20px debajo del visor.
    - `max-width: 100%;` asegura que el visor nunca se expanda más allá del 100% del ancho del contenedor.
  */
}

@media (max-width: 767.98px) {
  .download-btn {
    font-size: 14px;
    padding: 8px 16px;
    /*
      @media query para pantallas pequeñas (máximo 767.98px):
      - Reduce el tamaño del texto dentro del botón de descarga.
      - Ajusta el padding del botón para que se vea más compacto en pantallas pequeñas.
    */
  }
}

td,
th {
  font-size: 1.2rem;
  /*
    td, th:
    - Ajusta el tamaño de fuente en las celdas de la tabla (td) y los encabezados de tabla (th) a 1.2rem, que es un poco más grande que el tamaño de fuente pequeño estándar.
  */
}

.animated-line {
  animation: expand-line 1s ease-out forwards;
  /* 
    - Aplica una animación llamada "expand-line" que dura 1 segundo y usa 
    - una transición suave para expandir el ancho.
  */
}

@keyframes expand-line {
  0% {
    width: 0;
    /* 
      - Al inicio de la animación, el ancho es 0.
    */
  }

  100% {
    width: 100%;
    /* 
      - Al final de la animación, el ancho se expande al 100%, 
      - haciéndola completamente visible.
    */
  }
}

@media (max-width: 768px) {
  h2 span {
    display: block;
    /* 
      - Cambia el span dentro del h2 a bloque en pantallas pequeñas, 
      - para que ocupe toda la línea.
    */

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

  .animated-line {
    width: 80%;
    /* 
      - Reduce el ancho de la línea animada al 80% en pantallas pequeñas 
      - para que se ajuste mejor.
    */
  }
}