.desglose-icon {
  font-size: 1.4rem;   /* tamaño del icono */
  color: #009887;      /* color verde */
  cursor: pointer;     /* puntero en forma de mano */
  transition: transform 0.2s ease, color 0.2s ease;
  text-shadow: 0 0 1px currentColor, 0 0 1px currentColor; /*engrosar el icono de descargar desglose*/
}

.desglose-icon:hover {
  color: #AE1922;      /* color más claro al pasar el mouse */
  transform: scale(1.2); /* efecto de zoom */
}
.btn-rojo {
  color: #fff;
  background-color: #AE1922;
  border-color: #AE1922;
}

.btn-rojo:hover {
  color: #fff;
  background-color: #009887; /* un poco más oscuro para hover */
  border-color: #009887;
}

.btn-rojo:disabled {
  opacity: 0.65;
  color: #333333;
  background-color: #CCCCCC;
  border-color: #CCCCCC;
}

  /* Encabezado fiusha */
  #tabla thead {
    background-color: #C90166; /* color fiusha */
  }
  
  #tabla thead th {
    color: white;              /* texto blanco */
    text-align: center;        /* centrado */
    padding: 10px;
    border: 1px solid #a90055; /* borde un poco más oscuro */
  }

  /* Filas alternadas para mejor lectura */
  #tabla tbody tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  #tabla tbody tr:nth-child(odd) {
    background-color: #ffffff;
  }
/* Estilo responsive y seguro para la "X" de SweetAlert */
.swal2-close {
  color: #fff !important;
  background-color: #C90166 !important;
  border-radius: 50% !important;

  /* Tamaño flexible según el modal y el contenido */
  width: clamp(2rem, 6%, 3rem) !important;
  height: clamp(2rem, 6%, 3rem) !important;
  font-size: clamp(1.2rem, 4%, 1.5rem) !important;
  font-weight: bold !important;
  text-align: center;
  line-height: clamp(2rem, 6%, 3rem) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);

  /* Posición adaptativa */
  position: absolute !important;
  top: 1rem !important; /* margen superior inicial */
  right: 1rem !important; /* margen derecho inicial */

  /* Evitar que se superponga al contenido */
  max-top: calc(var(--swal2-padding) + 0.5rem); /* usa padding interno del modal */
  max-right: calc(var(--swal2-padding) + 0.5rem);

  opacity: 1 !important;
  transition: transform 0.2s ease, background-color 0.2s ease;
  z-index: 1000;
}

.swal2-close:hover {
  background-color: #FF007F !important;
  transform: scale(1.25);
}

/* Ajuste dinámico según contenido */
@media (max-width: 768px) {
  .swal2-close {
    top: 0.75rem !important;
    right: 0.75rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 1.2rem !important;
    line-height: 2.5rem !important;
  }  
}
/* Estilo para resaltar el nombre de la dependencia */
#nombreDependencia {
  color: #009887;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
}

.titulo-sueldo {
  color: #009887; /* verde */
}