.btn-puesto,
a.btn[href*="cap_puesto"] {
  min-width: 42px;
  border-radius: 7px;
  padding: 0.18rem 0.25rem;
  line-height: 1.15;
}

.btn-puesto[data-sector="A"],
a.btn[href*="cap_puesto"][href*="id_sector=A"] {
  color: #1e3a8a;
  background-color: #dbeafe;
  border-color: #93c5fd;
}

.btn-puesto[data-sector="B"],
a.btn[href*="cap_puesto"][href*="id_sector=B"] {
  color: #14532d;
  background-color: #dcfce7;
  border-color: #86efac;
}

.btn-puesto[data-sector="C"],
a.btn[href*="cap_puesto"][href*="id_sector=C"] {
  color: #9a3412;
  background-color: #ffedd5;
  border-color: #fdba74;
}

.btn-puesto[data-sector="D"],
a.btn[href*="cap_puesto"][href*="id_sector=D"] {
  color: #4c1d95;
  background-color: #ede9fe;
  border-color: #c4b5fd;
}

.btn-puesto[data-sector="E"],
a.btn[href*="cap_puesto"][href*="id_sector=E"] {
  color: #7f1d1d;
  background-color: #fee2e2;
  border-color: #fca5a5;
}

.btn-puesto[data-sector="A"]:hover,
.btn-puesto[data-sector="A"]:focus,
.btn-puesto[data-sector="B"]:hover,
.btn-puesto[data-sector="B"]:focus,
.btn-puesto[data-sector="C"]:hover,
.btn-puesto[data-sector="C"]:focus,
.btn-puesto[data-sector="D"]:hover,
.btn-puesto[data-sector="D"]:focus,
.btn-puesto[data-sector="E"]:hover,
.btn-puesto[data-sector="E"]:focus,
a.btn[href*="cap_puesto"][href*="id_sector=A"]:hover,
a.btn[href*="cap_puesto"][href*="id_sector=A"]:focus,
a.btn[href*="cap_puesto"][href*="id_sector=B"]:hover,
a.btn[href*="cap_puesto"][href*="id_sector=B"]:focus,
a.btn[href*="cap_puesto"][href*="id_sector=C"]:hover,
a.btn[href*="cap_puesto"][href*="id_sector=C"]:focus,
a.btn[href*="cap_puesto"][href*="id_sector=D"]:hover,
a.btn[href*="cap_puesto"][href*="id_sector=D"]:focus,
a.btn[href*="cap_puesto"][href*="id_sector=E"]:hover,
a.btn[href*="cap_puesto"][href*="id_sector=E"]:focus {
  color: #ffffff !important;
}

.btn-puesto[data-sector="A"]:hover,
.btn-puesto[data-sector="A"]:focus,
a.btn[href*="cap_puesto"][href*="id_sector=A"]:hover,
a.btn[href*="cap_puesto"][href*="id_sector=A"]:focus {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
}

.btn-puesto[data-sector="B"]:hover,
.btn-puesto[data-sector="B"]:focus,
a.btn[href*="cap_puesto"][href*="id_sector=B"]:hover,
a.btn[href*="cap_puesto"][href*="id_sector=B"]:focus {
  background-color: #15803d;
  border-color: #15803d;
}

.btn-puesto[data-sector="C"]:hover,
.btn-puesto[data-sector="C"]:focus,
a.btn[href*="cap_puesto"][href*="id_sector=C"]:hover,
a.btn[href*="cap_puesto"][href*="id_sector=C"]:focus {
  background-color: #c2410c;
  border-color: #c2410c;
}

.btn-puesto[data-sector="D"]:hover,
.btn-puesto[data-sector="D"]:focus,
a.btn[href*="cap_puesto"][href*="id_sector=D"]:hover,
a.btn[href*="cap_puesto"][href*="id_sector=D"]:focus {
  background-color: #6d28d9;
  border-color: #6d28d9;
}

.btn-puesto[data-sector="E"]:hover,
.btn-puesto[data-sector="E"]:focus,
a.btn[href*="cap_puesto"][href*="id_sector=E"]:hover,
a.btn[href*="cap_puesto"][href*="id_sector=E"]:focus {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

@media (max-width: 767px) {
  .btn-puesto,
  a.btn[href*="cap_puesto"] {
    min-width: 34px;
    border-radius: 5px;
    padding: 0.1rem 0.2rem;
    font-size: 0.88rem;
    line-height: 1.1;
  }
}