/* Estilos para las tarjetas con hover */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza la transición para el tamaño y la sombra */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra inicial ligera */
  border: none; /* Elimina el borde */
}

.card-hover:hover {
  transform: scale(
    1.02
  ); /* Aumenta ligeramente el tamaño de la tarjeta al hacer hover */
  box-shadow: 0 10px 20px rgba(0, 191, 255, 0.5); /* Añade una sombra celeste más intensa al hacer hover */
}

/* Estilos para las tarjetas de la clase regidor */
.regidor {
  background-color: #e0f7fa; /* Fondo azul claro */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra inicial ligera */
  border: none; /* Elimina el borde */
}

.card-alcalde {
  background-color: #e0f7fa; /* Mismo estilo de fondo que .regidor */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra inicial ligera */
  border: none; /* Elimina el borde */
}

.regidor:hover {
  transform: scale(1.05); /* Amplía aún más la tarjeta al hacer hover */
  border-radius: 5px; /* Añade bordes redondeados */
  box-shadow: 0 10px 20px rgba(0, 191, 255, 0.5); /* Sombra celeste más intensa al hacer hover */
}

.card-body.regidor {
  font-size: 11px; /* Tamaño de fuente más pequeño para el cuerpo de las tarjetas .regidor */
}

/* Estilo para el título de la sección */
.section-title {
  border-top: 6px double #2ff1ff; /* Borde superior con doble línea celeste */
  background-color: #2ff1ff; /* Fondo celeste */
  width: 25%; /* El título ocupa el 25% del ancho */
  margin: auto; /* Centra el título */
}

/* Imagen o elemento que ocupe toda la altura y el ancho */
.full-height {
  height: 100%;
  width: 100%;
  object-fit: cover; /* Asegura que la imagen cubra todo el espacio, sin deformarse */
}

/* Ajuste de altura para HTML, Body y contenedor central */
html,
body,
.col-md-8 {
  height: 100%; /* El contenedor ocupará toda la altura de la ventana */
}

/* Centrar contenido dentro del contenedor .col-md-8 */
.col-md-8 {
  display: flex;
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */
}

/* Tamaño de texto para el cuerpo de la tarjeta */
.card-text {
  font-size: 1rem; /* Tamaño de texto de 16px */
}

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

/* Flexbox para las filas */
.row {
  display: flex;
  flex-wrap: wrap; /* Las filas se adaptarán al tamaño disponible */
}

/* Diseño para las tarjetas */
.card {
  display: flex;
  flex-direction: column; /* Alinea los elementos dentro de la tarjeta verticalmente */
  height: 100%; /* La tarjeta ocupará todo el alto del contenedor */
}

/* Ajustes de estilo para las tablas */
table {
  font-size: 1rem; /* Tamaño de texto de 16px en tablas */
}

.dataTables_wrapper .dataTables_filter {
  margin-top: 10px;
  margin-bottom: 10px; /* Añade márgenes superior e inferior a los filtros de las tablas */
}