th,
td {
  height: 30px;
  /* 
    - Establece la altura de las celdas de la tabla en 30 píxeles.
  */

  width: 5%;
  /* 
    - Define el ancho de cada columna de la tabla como 5%.
    - Calculado como 100% dividido entre 20 columnas, para que cada columna ocupe uniformemente el espacio disponible.
  */
}

.oficina {
  background-color: #007bff;
  /* 
    - Establece un fondo azul para el elemento con clase "oficina".
  */

  color: white;
  /* 
    - Define el color del texto como blanco.
  */

  border-radius: 5px;
  /* 
    - Aplica un radio de borde de 5 píxeles para esquinas redondeadas.
  */

  padding: 5px;
  /* 
    - Añade un relleno de 5 píxeles alrededor del contenido.
  */

  text-align: center;
  /* 
    - Centra el texto dentro del elemento.
  */

  cursor: pointer;
  /* 
    - Cambia el cursor a un puntero al pasar el mouse, indicando que es interactivo.
  */

  transition: background-color 0.3s;
  /* 
    - Aplica una transición suave de 0.3 segundos al color de fondo al cambiar.
  */

  font-size: 0.85rem;
  /* 
    - Establece el tamaño de fuente en 0.85 rem.
  */
}

.oficina:hover {
  background-color: #0056b3;
  /* 
    - Cambia el color de fondo a un azul más oscuro cuando se pasa el mouse sobre el elemento.
  */
}

/* Borde superior */
.brd_top {
  border-top: 1px solid black;
  /* 
    - Aplica un borde superior de 1 píxel sólido de color negro.
  */
}

/* Borde inferior */
.brd_bottom {
  border-bottom: 1px solid black;
  /* 
    - Aplica un borde inferior de 1 píxel sólido de color negro.
  */
}

/* Borde izquierdo */
.brd_left {
  border-left: 1px solid black;
  /* 
    - Aplica un borde izquierdo de 1 píxel sólido de color negro.
  */
}

/* Borde derecho */
.brd_right {
  border-right: 1px solid black;
  /* 
    - Aplica un borde derecho de 1 píxel sólido de color negro.
  */
}

.hidden-row {
  display: none;
  /* 
    - Oculta cualquier elemento con la clase "hidden-row" de la vista.
  */
}

.modal-header {
  color: white;
  /* 
    - Establece el color del texto en el encabezado del modal como blanco.
  */
  /* Color de fondo para el header */
}

.modal-title {
  font-size: 18px;
  /* 
    - Define el tamaño de fuente del título del modal como 18 píxeles.
  */
}

.modal-body {
  font-size: 14px;
  /* 
    - Establece el tamaño de fuente del cuerpo del modal como 14 píxeles.
  */
}

.close {
  color: white;
  /* 
    - Cambia el color del botón de cerrar del modal a blanco.
  */
}

.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.
    */
  }
}