/* ==========================================================
   Accesos Header (Empleador / Trabajador / Fiscalizador)
   Estilo: píldoras BAJAS + header sin inflarse
   ========================================================== */

/* --- Compactar altura del header top --- */
.headerTopArea{
  padding: 2px 0 !important;              /* 🔽 más bajo */
}

/* Alinear verticalmente columnas en la franja superior */
.headerTopArea .row{
  display: flex;
  align-items: center;
}

/* Evitar márgenes/paddings extra del theme */
.headerTopArea .topInfo{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Evita que el theme meta line-height/padding que agranda el header */
.headerTopArea .topInfo > li{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  list-style: none !important;
}

/* Si el theme agrega separadores pseudo-elemento */
.headerTopArea .topInfo > li:before,
.headerTopArea .topInfo > li:after{
  content: none !important;
  display: none !important;
}

/* --- Contenedor de accesos --- */
.topInfo li.clientAreaLi.accessLi{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Botón píldora BAJO --- */
.topInfo a.access-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

  height: 40px !important;                /* 🔥 controla el alto aquí */
  padding: 0 10px !important;             /* sin padding vertical */
  border-radius: 999px !important;

  background: #fff !important;
  border: 1px solid rgba(45,108,223,.30) !important;

  color: #2d6cdf !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow: 0 3px 8px rgba(0,0,0,.10) !important;  /* 🔽 sombra más suave */
  transition: all .15s ease !important;
}

/* Burbuja del ícono (más chica) */
.topInfo a.access-btn i{
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(45,108,223,.10) !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* Mata estilos internos que mete el theme (rectángulos, padding) */
.topInfo a.access-btn span,
.topInfo a.access-btn .lbl{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
  color: inherit !important;
}

/* Hover */
.topInfo a.access-btn:hover,
.topInfo a.access-btn:focus{
  background: #2d6cdf !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.14) !important;
}

.topInfo a.access-btn:hover i,
.topInfo a.access-btn:focus i{
  background: rgba(255,255,255,.22) !important;
}

/* --- Mobile: solo iconos (tamaño tocable) --- */
@media (max-width: 768px){
  .topInfo a.access-btn{
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .topInfo a.access-btn .lbl{
    display: none !important;
  }
}

.topInfo li.clientAreaLi.accessLi{
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* o flex-start */
}

.topInfo .access-group{
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0px !important;
}